首页 新闻 搜索 专区 学院

如何运用按钮赋予某一个div有hover和toggle方法

0
悬赏园豆:20 [已关闭问题] 关闭于 2015-11-09 12:34

需求:

当点击"hover形式"按钮的时候,下面的菜单就有hover事件效果(鼠标移上后显示,移走后隐藏)

当点击"toggle形式"按钮的时候,下面的菜单就有toggle事件效果(鼠标点击后显示,再点击后隐藏)

相关代码:

html:

 <ul id="menu">
        <li class="m_item">
            <a href="javascript:;" class="item_title">体育明星</a>
            <ul class="i_item">
                <li><a href="javascript:;">乔丹</a></li>
                <li><a href="javascript:;">纳什</a></li>
                <li><a href="javascript:;">奥尼尔</a></li>
            </ul>
        </li>
        <li class="m_item">
            <a href="javascript:;" class="item_title">体育明星</a>
            <ul class="i_item">
                <li><a href="javascript:;">普京</a></li>
                <li><a href="javascript:;">习大大</a></li>
                <li><a href="javascript:;">奥巴马</a></li>
            </ul>
        </li>
        <li class="m_item">
            <a href="javascript:;" class="item_title">体育明星</a>
            <ul class="i_item">
                <li><a href="javascript:;">黄家驹</a></li>
                <li><a href="javascript:;">刘德华</a></li>
                <li><a href="javascript:;">周润发</a></li>
            </ul>
        </li>
        <li class="m_item">
            <a href="javascript:;" class="item_title">体育明星</a>
            <ul class="i_item">
                <li><a href="javascript:;">康熙</a></li>
                <li><a href="javascript:;">纳什</a></li>
                <li><a href="javascript:;">秦始皇</a></li>
            </ul>
        </li>
    </ul>

js:

$(function () {
    $(".i_item").hide();
    $("#btnToggle").bind("click",MyToggle);
     $("btnHover").bind("click",MyHover);
});


function MyToggle()
{
    $(".item_title").toggle(function () {
        $(this).next().slideDown();
    }, function () {
        $(this).next().slideUp();
    });
}

function MyHover()
{
    $(".item_title").hover(function () {
        $(this).next().slideDown();
    }, function () {
        $(this).next().slideUp();
    });
}

问题:以上代码无效果,请问应该怎么写才能实现需求,谢谢!

ruanmou的主页 ruanmou | 初学一级 | 园豆:32
提问于:2015-11-09 10:58
< >
分享
所有回答(2)
0

你的几个问题:1:$("btnHover").bind("click",MyHover);你取不到焦点

2:你要鼠标移动该用焦点的事件

3:$(this).next().slideDown();你这样取是什么意思?你不去取父节点,去<li>它又没有子节点,你怎么可以收缩的到

上面2点做到你的需求就解决了

稳稳的河 | 园豆:4216 (老鸟四级) | 2015-11-09 12:19

直接上代码,不需要1,2,3。

支持(0) 反对(0) ruanmou | 园豆:32 (初学一级) | 2015-11-09 12:28

@软谋教育: 想多了,1,2,3,你开始的代码没有这3个问题?解决了一定就OK,就改几句就行,还来句直接上代码,直接上了代码有什么用

支持(0) 反对(0) 稳稳的河 | 园豆:4216 (老鸟四级) | 2015-11-09 12:45

@稳稳的河: 已处理,不过跟你说的123无关,还是谢谢!勿用回!

支持(0) 反对(0) ruanmou | 园豆:32 (初学一级) | 2015-11-09 12:48

@软谋教育: 还是回个,我刚看下下面的,1:$("#btnHover").bind("click",MyHover);看你的问题写的是什么2:$(".item_title").unbind("mouseenter").unbind("mouseleave");自己看看这局是什么意思,不是第1与第2,算了,说了你也不会看

支持(0) 反对(0) 稳稳的河 | 园豆:4216 (老鸟四级) | 2015-11-09 12:57
0

$(function () {
$(".i_item").hide();
$("#btnToggle").bind("click",MyToggle);
$("#btnHover").bind("click",MyHover);
});


function MyToggle()
{
$(".item_title").unbind("mouseenter").unbind("mouseleave");
$(".item_title").toggle(function () {
$(this).next().slideDown();
}, function () {
$(this).next().slideUp();
});
}

function MyHover()
{
$(".item_title").hover(function () {
$(this).next().slideDown();
}, function () {
$(this).next().slideUp();
});
}

 

这样既可了,刚才掉写了一句话。很简单。

ruanmou | 园豆:32 (初学一级) | 2015-11-09 12:34
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册