仅打开被点击的下拉菜单答案

【问题标题】：Open only dropdown that is clicked仅打开被点击的下拉菜单
【发布时间】：2014-01-29 02:32:52
【问题描述】：

在我当前的代码中，每当我单击最大化一个下拉菜单时，都会出现两个下拉菜单的内容。我只想要我点击的问题来下拉答案。谁能帮我？我不擅长 jquery，所以我尝试了很多次，但未能解决问题。以下是代码链接。

HTML 代码

<div class="faqdropdown">
    <ul class="faqquestion"> 
           Q: Question 1 <li class="faqbutton">+</li>
    </ul>
        <ul class="faqcontent">
       A: Answer 1
        </ul>

        <ul class="faqquestion"> 
       Q: Question 2 <li class="faqbutton">+</li>
        </ul>

        <ul class="faqcontent">
       A: Answer 2
        </ul>
</div>

JAVASCRIPT

$(document).ready(function() { 
$(".faqbutton").click(function(){
$(this).closest('.faqcontent').find('.faqcontent').addClass("open");

if($(this).html() == "-"){
     $(this).html("+");
 }
 else{
     $(this).html("-");
 }

  $(".faqcontent").slideToggle();
 });
});

【问题讨论】：

您的 HTML 无效。 li 之前的文本应该在 li 内或 ul 外。
我希望下拉菜单仅在单击“+”时发生，这就是问题在 li 之外的原因。我现在明白你的意思了，我会改变它谢谢你:)

标签： jquery dropdownbox

【解决方案1】：

改变

$(".faqcontent").slideToggle();

到

$(this).closest(".faqquestion").next().slideToggle();

DEMO here.

【讨论】：

感谢您的帮助:)

【解决方案2】：

您可以使用.closest() 和.next() 的组合

使用

$(this).closest('.faqquestion').next(".faqcontent").slideToggle();

而不是

$(".faqcontent").slideToggle();

DEMO

【讨论】：

感谢您的帮助，这很好理解:)

【解决方案3】：

试试这样的，FIDDLE

    $(this).parent().next(".faqcontent").slideToggle();

【讨论】：

感谢您的帮助:)

【解决方案4】：

Fixed。你有slideToggle 所有.faqcontent 元素，而不是下一个。

【讨论】：

【解决方案5】：

只需在 DOM 上切换第一个内容即可，无需额外操作

$(document).ready(function() { 
 $(".faqcontent").first().slideToggle();
$(".faqbutton").click(function(){

    if($(this).html() == "-")

         {
        $(this).html("+");
    }
    else{
        $(this).html("-");
    }

$(".faqcontent").slideToggle();
});
});

http://jsfiddle.net/Qy6Sj/918/

【讨论】：

【解决方案6】：

这样做：

$(document).ready(function () {
  $(".faqbutton").click(function () {
     if ($(this).html() == "+")   //<-----check for "+" here
     {
        $(this).html("-");    // <----replace the text to "-" here
        $(this).closest('.faqquestion').next(".faqcontent").slideToggle();
     } else {
        $(this).html("+");
        $(this).closest('.faqquestion').next(".faqcontent").slideToggle();
     }
  });
});

您在初始文本为 + 的情况下检查了错误的文本，因此您必须检查它，然后替换单击按钮的 innerhtml。

并且您必须遍历到单击按钮的父级，.closest() or .parent() 会这样做。 .closest() 的执行速度相当快，因此您可以使用它，然后您可以选择下一个要滑动切换的元素。

虽然我可以建议你做一个有效的 html 标记。你当前的标记是无效的，你不能这样在 li 之外有一个文本节点，所以我建议你这样做：

<li class="faqbutton">Q: Question 1 <span>+</span></li>

因此，如果您遵循此标记，则必须在 jQuery 中执行此操作：

$(document).ready(function () {
  $(".faqbutton").click(function () {
      if ($(this).find('span').html() == "+")  //<----change here
      {
        $(this).find('span').html("-");    //<-------change here
        $(this).closest('.faqquestion').next(".faqcontent").slideToggle();
      } else {
        $(this).find('span').html("+");   //<-------change here
        $(this).closest('.faqquestion').next(".faqcontent").slideToggle();
      }
  });
});

Demo

【讨论】：

感谢您的解释，非常有帮助:)

【解决方案7】：

see this fiddle 
  http://jsfiddle.net/Qy6Sj/919/  .
i have updated your code

【讨论】：

感谢您的帮助:)