Question

我有以下代码：

<ul class="cssdropdown">
    <li class="headlink">RANGE
        <ul class="innerDrop">
            <li>Range Child</li>
        <ul>
    <li>
    <li class="headlink">HOME
        <ul class="innerDrop">
            <li>Home Child</li>
        <ul>
    <li>
</ul>

我正在尝试使用一些jQuery切换<ul class="innerDrop"。我需要通过添加具有hide

的display:none类来完成此操作

它隐藏得很好，但是当我点击HOME或RANGE时，当我只想打开它时，它会打开内部<li>。

这是我的jQuery：

$(document).ready(function(){

        $('li.headlink ul').addClass('hide');
        $('#header').append('<div class=\"showpersonal\" onclick=\"toggleMenu()\"></div>');
        $('#header').append('<div class=\"showbusiness\" onclick=\"toggleMenu()\"></div>');
    });
    function toggleMenu() {
        $('li.headlink ul').toggleClass('hide', this);

    }

Answer 1

你的问题是由nikc回答的，只是我身边的暗示 jQuery允许您以如下方式添加单击处理程序：

$('<div/>', {
   class:    'showpersonal',
   click:    function(e){
      $(this).find('li.headlink ul').toggleClass('hide');
   }
}).appendTo('#header');

Answer 2

你的jquery

$('li.headlink ul').toggleClass('hide', this);

会在DOM中的任何位置找到ul内的所有li.headlink列表。将其更改为

$(this).find('li.headlink ul').toggleClass('hide');

只要this引用正确的节点，它就应该按预期工作。为确保这一点，您可以在事件触发器中将this作为参数添加到toggleMenu，并相应地修改toggleMenu功能。

// Event trigger
onclick="toggleMenu(this);"

// Event handler
function toggleMenu(node) {
    $(node).find('li.headlink ul').toggleClass('hide');
}

如果点击事件是打开子菜单的最佳方式，那么它是有争议的。常见的方法是 - 恕我直言 - 在悬停时打开子菜单。但那当然是主观的。

Answer 3

这是一个例子

<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript">

    $(document).ready(function(){

        $('li.headlink ul').addClass('hide');
        $('li.headlink').click(function(){
            $(this).children('ul').toggleClass('hide');
        });

    });

</script>
<style type="text/css">
    .hide{display:none;}
</style>
</head>
<body>
<ul class="cssdropdown">
    <li class="headlink">RANGE
        <ul class="innerDrop">
            <li>Range Child</li>
        </ul>
    </li>
    <li class="headlink">HOME
        <ul class="innerDrop">
            <li>Home Child</li>
        </ul>
    </li>
</ul>
</body>
</html>

jQuery $这个问题

3 个答案: