jQuery的指定元素

我有一个<ul>包含<h2>标题，每个标题下方都有文字。我希望能够通过单击每个标题来显示或隐藏下面的文本。jQuery的指定元素

我怎么能告诉jQuery来只从同一<li>中显示的文本标题被点击时没有if语句创建一个单独的每个<li>？

<ul> 
    <li> 
     <h2>heading</h2> 
     <div id='step'> 
      text text text 
     </div> 
    </li> 
    <li> 
     <h2>heading</h2> 
     <div id='step'> 
      text text text 
     </div> 
    </li> 
</ul> 

<script> 
    $("li").click(function() { 
     if ($("#step").is(":hidden")) { 
      $("#step").slideDown("slow"); 
     } else { 
      $("#step").slideUp("slow"); 
     } 
    }); 
</script>

来源

2012-11-13 Adam Ulivi

开始您的标记。 id属性必须是唯一的..所以你在文档中不能有多个步骤id。如果您需要定位这些元素，请将其更改为类。 –

的问题就在于，你是努力的目标与ID一步一个div但也有与ID多个div。使用不同的ID，用于股利

它可以如下定势：

<ul> 
<li> 
    <h2>heading</h2> 
    <div> 
    text text text 
    </div> 
</li> 
<li> 
    <h2>heading</h2> 
    <div> 
    text text text 
    </div> 
</li> 
</ul>

和JS

$("li").click(function() { 
    if ($(this).children('div').is(":hidden")) { 
     $(this).children('div').slideDown("slow"); 
    } else { 
     $(this).children('div').slideUp("slow"); 
    } 
});

请注意，在此示例假设您使用的唯一一个DIV li

来源

2012-11-13 11:00:34 Pankrates

+1，这是一个正确的答案，也许不是用户期望的，但对此的负面投票似乎对我来说太过于+1 – Vithozor

这应该做到这一点:) $（this）引用已被点击的列表元素，然后它“发现”下面的p标签和“slideToggle”的上下滑动依赖当前状态。

<script> 
    $(function(){ 
     $('li').click(function(){ 
      $(this).find('p').slideToggle(); 
     }); 
    }); 
</script> 
<ul> 
    <li> 
     <h2>heading 1</h2> 
     <p>Text text text</p> 
    </li> 
    <li> 
     <h2>heading 2</h2> 
     <p>Text text text</p> 
    </li> 
</ul>

来源

2012-11-13 11:02:06

首先你有一个重复的ID，这是不正确的。由于id应该是唯一的，所以将它们替换为类或其他标识符。

其次使用$(this)来引用被点击的元素。

HTML

<ul> 
<li> 
    <h2>heading</h2> 
    <div class='step'> 
    text text text 
    </div> 
</li> 
<li> 
    <h2>heading</h2> 
    <div class='step'> 
    text text text 
    </div> 
</li> 
</ul>

的JavaScript

$("li").click(function() { 
    $(this).children('.step').slideToggle('slow'); 
});

的jsfiddle：http://jsfiddle.net/JGZRN/

来源

2012-11-13 11:02:37 CodePB

+1，只是发布了相同的答案。你比我快 – Vithozor

如果更改id="step"通过的div class="step"，您可以使用此代码：

$("li").click(function() { 
    var div = $(this).find(".step"); 
    if (div.is(":hidden")) { 
     div.slideDown("slow"); 
    } 
    else { 
     div.slideUp("slow"); 
    } 
});

来源

2012-11-13 11:03:37 Vithozor

你可以这样做：

HTML：

<ul> 
    <li> 
    <h2>heading</h2> 
    <div id='step'> 
     text text text 
    </div> 
    </li> 
    <li> 
    <h2>heading</h2> 
     <div id='step'> 
     text text text 
    </div> 
    </li> 
    </ul>

JS：通过修正

$('ul li h2').click(function() { 
    $('#step').toggle('slow', function() { 
    // Animation complete. 
    }); 
});

这里预览小提琴http://jsfiddle.net/wandarkaf/2Pnz7/

希望这有助于

来源

2012-11-13 11:08:23 wandarkaf

jQuery的指定元素

回答

相关问题