Javascript 如何改进a'；遥控'；jQuery手风琴常见问题解答_Javascript_Jquery_Accordion

Javascript 如何改进a'；遥控'；jQuery手风琴常见问题解答

javascript jquery

Javascript 如何改进a'；遥控'；jQuery手风琴常见问题解答,javascript,jquery,accordion,Javascript,Jquery,Accordion,我拼凑了一些jQuery来控制一个简单的FAQ列表点击问题，答案就会显示出来。我还添加了“全部展开”和“全部最小化”按钮。此按钮的文本会根据需要进行更改（通过jQuery）这是可行的-但不是很聪明查看JSFIDLE（下面的链接），单击问题1，然后单击“全部展开”按钮（在顶部），您将看到问题。打开和关闭状态变得混乱我明白为什么，我使用切换来控制答案是否显示。Toggle只会执行与目标元素处于的任何状态相反的操作有人知道如何改进吗？我的jQuery技能充其量是有限的这里有一个jsfidd

我拼凑了一些jQuery来控制一个简单的FAQ列表

点击问题，答案就会显示出来。我还添加了“全部展开”和“全部最小化”按钮。此按钮的文本会根据需要进行更改（通过jQuery）

这是可行的-但不是很聪明

查看JSFIDLE（下面的链接），单击问题1，然后单击“全部展开”按钮（在顶部），您将看到问题。打开和关闭状态变得混乱

我明白为什么，我使用切换来控制答案是否显示。Toggle只会执行与目标元素处于的任何状态相反的操作

有人知道如何改进吗？我的jQuery技能充其量是有限的

这里有一个jsfiddle

jQuery $（“#FAQs.wrap”）.hide（）； $（“#FAQs.close”）.hide（）

HTML

<div class="faq-controls">
    <span id="Expand">Expand FAQs</span>
</div>
<ul id="FAQs" class="faq">
    <li>
        <h2>
            <span class="arrow-down">⬇</span><span class="close">✖</span>&nbsp;Question 1
        </h2>
        <div class="wrap">
            <p>
                Sed sit amet tempus magna, at blandit purus. Donec pulvinar vulputate nunc, id mollis sem congue sed. Nullam vitae diam eu libero tristique accumsan a vitae nulla. Mauris ut leo eros. In commodo pretium leo eget lobortis. Fusce et metus orci. Nullam semper velit sit amet quam semper commodo. Aenean enim dui, mollis non volutpat vulputate, elementum ut metus. Nulla feugiat tellus massa, tristique fringilla odio commodo et.
            </p>
        </div>
    </li>
    <li>
        <h2>
            <span class="arrow-down">⬇</span><span class="close">✖</span>&nbsp;Question 2
        </h2>
        <div class="wrap">
            <p>
                Sed sit amet tempus magna, at blandit purus. Donec pulvinar vulputate nunc, id mollis sem congue sed. Nullam vitae diam eu libero tristique accumsan a vitae nulla. Mauris ut leo eros. In commodo pretium leo eget lobortis. Fusce et metus orci. Nullam semper velit sit amet quam semper commodo. Aenean enim dui, mollis non volutpat vulputate, elementum ut metus. Nulla feugiat tellus massa, tristique fringilla odio commodo et.
            </p>
        </div>
    </li>
    <li>
        <h2>
            <span class="arrow-down">⬇</span><span class="close">✖</span>&nbsp;Question 3
        </h2>
        <div class="wrap">
            <p>
                Sed sit amet tempus magna, at blandit purus. Donec pulvinar vulputate nunc, id mollis sem congue sed. Nullam vitae diam eu libero tristique accumsan a vitae nulla. Mauris ut leo eros. In commodo pretium leo eget lobortis. Fusce et metus orci. Nullam semper velit sit amet quam semper commodo. Aenean enim dui, mollis non volutpat vulputate, elementum ut metus. Nulla feugiat tellus massa, tristique fringilla odio commodo et.
            </p>
        </div>
    </li>
</ul>


展开常见问题解答


⬇✖ 问题1

坐在温文尔雅的普卢斯，艾米特·坦普斯·麦格纳。枕叶秃鹫，我是莫利斯。没有生命，没有自由，没有生命。莫里斯和利奥·厄洛斯。利奥·埃吉特·洛博蒂斯的《前康茂德》。福斯和梅特斯·奥奇。你坐在我的座位上。埃尼安·埃尼姆·杜伊，莫利斯·非沃里帕特·沃普塔特，元素和元素。马萨、弗林蒂亚和奥迪奥·康莫多等人都是一个封建主义者。



⬇✖ 问题2

坐在温文尔雅的普卢斯，艾米特·坦普斯·麦格纳。枕叶秃鹫，我是莫利斯。没有生命，没有自由，没有生命。莫里斯和利奥·厄洛斯。利奥·埃吉特·洛博蒂斯的《前康茂德》。福斯和梅特斯·奥奇。你坐在我的座位上。埃尼安·埃尼姆·杜伊，莫利斯·非沃里帕特·沃普塔特，元素和元素。马萨、弗林蒂亚和奥迪奥·康莫多等人都是一个封建主义者。



⬇✖ 问题3

坐在温文尔雅的普卢斯，艾米特·坦普斯·麦格纳。枕叶秃鹫，我是莫利斯。没有生命，没有自由，没有生命。莫里斯和利奥·厄洛斯。利奥·埃吉特·洛博蒂斯的《前康茂德》。福斯和梅特斯·奥奇。你坐在我的座位上。埃尼安·埃尼姆·杜伊，莫利斯·非沃里帕特·沃普塔特，元素和元素。马萨、弗林蒂亚和奥迪奥·康莫多等人都是一个封建主义者。

您正在使用滑动切换，因此，无论当前状态（打开或关闭）是什么，当您单击“全部”切换时，都将进入相反的状态。使用jquery的“slideup”或“slidedown”函数来获得更多的控制

类似于此，您可能还需要更新类切换：

jquery

if($(this).text() == 'Minimise FAQs')
{
   $(this).text('Expand FAQs');
   $('#FAQs .wrap').slideUp('fast');

}
else
{
   $(this).text('Minimise FAQs');
    $('#FAQs .wrap').slideDown('fast');

}

css

.faq-controls {
  font-size: 0.9em;
  margin-bottom: 1.5em; }

  .faq-controls #Expand, .faq-controls #Minimise {
    color: #3b3b3b;
    border-bottom: 1px solid #3b3b3b;
    cursor: pointer; }

    .faq-controls #Expand:hover, .faq-controls #Minimise:hover {
      color: #ed1b2e;
      border-bottom-color: #ed1b2e; }  

ul.faq {
  list-style: none;
  margin: 1em 0 0 0;
  padding: 0; }

   ul.faq li {
    margin: 0 0 1.3em 0;
    padding: 0 0 1.3em 0;
    border-bottom: 1px solid #d4d4d4; }

     ul.faq li h2.link {
      margin: 0;
      cursor: pointer;
      font-size: 1.1em; }

       ul.faq li h2.link:hover {
        color: #ed1b2e; }

       ul.faq li h2.link span.close,  ul.faq li h2.link span.arrow-down {
        background: #0053a0;
        color: white;
        width: 20px;
        line-height: 20px;
        display: block;
        text-align: center;
        float: left;
        font-size: 0.8em; } 

   ul.faq .wrap {
    display: block; }

html

<div class="faq-controls">
    <span id="Expand">Expand FAQs</span>
</div>
<ul id="FAQs" class="faq">
    <li>
        <h2>
            <span class="arrow-down">⬇</span><span class="close">✖</span>&nbsp;Question 1
        </h2>
        <div class="wrap">
            <p>
                Sed sit amet tempus magna.
            </p>
        </div>
    </li>
    <li>
        <h2>
            <span class="arrow-down">⬇</span><span class="close">✖</span>&nbsp;Question 2
        </h2>
        <div class="wrap">
            <p>
                Sed sit amet tempus magna.
            </p>
        </div>
    </li>
    <li>
        <h2>
            <span class="arrow-down">⬇</span><span class="close">✖</span>&nbsp;Question 3
        </h2>
        <div class="wrap">
            <p>
                Sed sit amet tempus magna, at blandit purus. Donec pulvinar vulputate nunc, id mollis sem congue sed. Nullam vitae diam eu libero tristique accumsan a vitae nulla. Mauris ut leo eros. In commodo pretium leo eget lobortis. Fusce et metus orci. Nullam semper velit sit amet quam semper commodo. Aenean enim dui, mollis non volutpat vulputate, elementum ut metus. Nulla feugiat tellus massa, tristique fringilla odio commodo et.
            </p>
        </div>
    </li>
</ul>


展开常见问题解答


⬇✖ 问题1

他坐在阿梅特·坦普斯·麦格纳（amet tempus magna）的座位上。



⬇✖ 问题2

他坐在阿梅特·坦普斯·麦格纳（amet tempus magna）的座位上。



⬇✖ 问题3

坐在温文尔雅的普卢斯，艾米特·坦普斯·麦格纳。枕叶秃鹫，我是莫利斯。没有生命，没有自由，没有生命。莫里斯和利奥·厄洛斯。利奥·埃吉特·洛博蒂斯的《前康茂德》。福斯和梅特斯·奥奇。你坐在我的座位上。埃尼安·埃尼姆·杜伊，莫利斯·非沃里帕特·沃普塔特，元素和元素。马萨、弗林蒂亚和奥迪奥·康莫多等人都是一个封建主义者。

感谢您的回复，我注意到第一次单击“展开常见问题解答”时，只有问题旁边的箭头发生变化，除非第二次单击“展开常见问题解答”，否则不会显示答案。此时图标已不同步。。。有什么想法吗？是的，我把起起落落搞糊涂了。我已经更新了小提琴链接和代码。啊，太棒了！工作起来很有魅力。非常感谢。您知道JSFIDLE URL是否是永久的吗？我希望这个想法可以被其他人使用——可能对将来的人有用。我添加了html和css以防万一，但是JSFIDLE应该会存在一段时间。

<div class="faq-controls">
    <span id="Expand">Expand FAQs</span>
</div>
<ul id="FAQs" class="faq">
    <li>
        <h2>
            <span class="arrow-down">⬇</span><span class="close">✖</span>&nbsp;Question 1
        </h2>
        <div class="wrap">
            <p>
                Sed sit amet tempus magna.
            </p>
        </div>
    </li>
    <li>
        <h2>
            <span class="arrow-down">⬇</span><span class="close">✖</span>&nbsp;Question 2
        </h2>
        <div class="wrap">
            <p>
                Sed sit amet tempus magna.
            </p>
        </div>
    </li>
    <li>
        <h2>
            <span class="arrow-down">⬇</span><span class="close">✖</span>&nbsp;Question 3
        </h2>
        <div class="wrap">
            <p>
                Sed sit amet tempus magna, at blandit purus. Donec pulvinar vulputate nunc, id mollis sem congue sed. Nullam vitae diam eu libero tristique accumsan a vitae nulla. Mauris ut leo eros. In commodo pretium leo eget lobortis. Fusce et metus orci. Nullam semper velit sit amet quam semper commodo. Aenean enim dui, mollis non volutpat vulputate, elementum ut metus. Nulla feugiat tellus massa, tristique fringilla odio commodo et.
            </p>
        </div>
    </li>
</ul>