Question

在我当前的代码中，每当我单击以最大化一个下拉列表时，将显示两个下拉列表的内容。我只想要点击的问题放弃答案。谁能帮我？我对jquery并不擅长，所以我尝试了很多次，但未能解决问题。以下是代码的链接。

HTML CODE

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

Answer 1

更改

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

到

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

DEMO here.

Answer 2

您可以使用.closest()和.next()

的组合

使用

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

而不是

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

DEMO

Answer 3

尝试这样的事情，FIDDLE

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

Answer 4

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

Answer 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/

Answer 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标记。你当前的标记是无效的，你不能有这样的文本节点，所以我建议你这样做：< / p>

<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

Answer 7

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

仅打开单击的下拉列表

7 个答案:

Demo