Question

我有一个带有多个lis的div，每个li都包含ul。我想独立切换每个李。就像我点击一个链接它应该只切换该组的ul，希望下面的代码将清除比我的话更多的东西。

<div id="sortable" style='width:700px; margin: 0 auto; border:2px solid; border-color:grey;'>
 <li class="ui-state-default"><a href='#' id='expand'> Group 1</a>
    <ul style= 'display:none' class='patents' id="sortable">
        <li id ='1' class="ui-state-default">Item 1</li>
        <li id ='2' class="ui-state-default">Item 2</li>
        <li id ='3' class="ui-state-default">Item 3</li>
    </ul>
 </li>
 <li class="ui-state-default"><a href='#' id='expand'> Group 2</a>
    <ul style= 'display:none' class='patents' id="sortable">
        <li id ='4' class="ui-state-default">Item 4</li>
        <li id ='5' class="ui-state-default">Item 5</li>
        <li id ='6' class="ui-state-default">Item 6</li>
    </ul>
</li>

脚本是

 <script>
  $(document).ready(function() {
    $('#expand').click(function() {
        $('.patents').toggle('slow', function() {
                    //instead of patents i need something unique 
        });
    });
});
</script>

如果我点击组1，项目1,2,3应该切换，如果我点击group2然后项目4,5,6应该切换我怎么能实现呢？

由于

Answer 1

你应该在顶级

上放置class =“expand”而不是id =“expand”（你不应该重复id）。

然后使用类选择器“。”而不是id“＃”并仅选择“.patents”，它们是单击元素的子元素

   $(document).ready(function() {
    $('.expand').click(function() {
         $(this).next().toggle('slow', function() {
                    //instead of patents i need something unique
        });
    });
});

Answer 2

基本上，您对$（'。patents'）的调用会在该页面上获取所有内容。相反，您需要从单击的元素开始。在click函数内部，$（this）引用当前元素。然后，您可以使用find方法查找单击元素的后代。

将$（'。patent'）替换为$（this）.find（'。patents'），你应该好好去。

另外，还有一些小的家务项目：

您应该使用class ='expand'而不是id ='expand'，并将脚本更改为引用'.expand'而不是'#expand'
如果没有封闭ul标签，则不应使用顶级li标签。见Is using <li> without enclosing <ul> tags dangerous?。

Answer 3

此处：http://jsfiddle.net/zeS8u/

HTML

<ul>
    <li><a href="#" class="clickme">Click me!</a>
        <ul>
            <li>Cat</li>
            <li>Dog</li>
            <li>Mouse</li>
        </ul>
    </li>

    <li><a href="#" class="clickme">Click me too!</a>
        <ul>
            <li>Zebra</li>
            <li>Lion</li>
            <li>Snow Yeti</li>
        </ul>
    </li>
</ul>

使用Javascript：

$("a.clickme").bind("click", function(e) {
   $(this).next("ul").toggle(); 
    return false;
});

Answer 4

id属性是唯一的，因此您需要更改为class：

例如：

<li class="ui-state-default"><a href='#' class='expand'> Group 2</a>

然后这样做：

$(document).ready(function() {
  $('.expand').each(function(){
    ($this).click(function() {
      var patents = $(this).next();
      $(patents).toggle(function() {
        $(this).hide();
      },
      function(){
        $(this).show();
      });
  });
});

Jquery独立切换

4 个答案: