只展开被点击的下拉菜单

Question

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

http://jsfiddle.net/Qy6Sj/912/

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();
 });
});

- user3180760

---

您的HTML无效。在li之前的文本应该在li内部或ul外部。 - putvande

我希望只有在点击“+”时才出现下拉菜单，所以问题就放在了li标签之外。 <更新> 现在我明白你的意思了，我会改变它，谢谢 :) - user3180760

Answer 1

更改

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

为了

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

点击此处查看示例。

- codingrose

---

感谢你的帮助 :) - user3180760

Answer 2

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

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

替代

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

演示

- Satpal

---

谢谢你的帮助，这非常易懂 :) - user3180760

Answer 3

试试这样做：FIDDLE

这里提供一个类似的示例链接。

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

- rajesh kakawat

---

感谢您的帮助 :) - user3180760

Answer 4

只需在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/

- A.T.

Answer 5

这样做：

$(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()或.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();
      }
  });
});

演示

- Jai

---

谢谢你的解释，非常有帮助 :) - user3180760

Answer 6

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

- Karthick Kumar

---

谢谢您的帮助 :) - user3180760

Answer 7

Fixed. 你应该只对下一个元素使用slideToggle而不是所有的.faqcontent元素。

- Alex