Question

找到一个javascript手风琴示例，它是我想要的90％（打开一个基于href的主手风琴）并修改它基本上添加一个级别的副手风琴与右侧＆＃34;更多信息+＆＃34;和＃34;少信息 - ＆＃34;仅通过显式单击打开和关闭的内容标记（不会在手风琴上自动关闭）。

用法将并行多个子手风琴，但不再进行子嵌套。虽然各种手风琴中的文字正确打开和关闭，但手风琴内容标记并未按预期运行。

对于单个子手风琴，单击打开将标记切换为＆＃34; less - ＆＃34;和部分显示，但点击关闭操作该部分关闭，但标记没有切换回原始＆＃34;更多信息+＆＃34;州。当多个子手风琴然后打开如上所述并且特定子手风琴的点击关闭关闭手风琴时，标记保持在＆＃34;少信息 - ＆＃34;状态（如上所述）和文本关闭，但首先是在开放式＆＃34;较少信息的手风琴之上 - ＆＃34;状态只将标记切换为＆＃34;更多信息+＆＃34;国家（数据保持开放）。

小手风琴需要彼此独立操作，并且标记要正确切换，但我不明白我错过了什么。

由于我只有3-4个最大平行子手风琴，我确实尝试创建编号重复的子手风琴，因此它们将是独立的，而这是解决＆＃34;交叉手风琴的黑客方法泄漏＆＃34 ;.如果我能让标记正常工作，那么我可以忍受这种黑客攻击。

我的代码......

<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>

<script type="text/javascript">
    $(document).ready(function($) {
        // Hide all panels
        $(".subpanel").hide(); 
        // Show first panel by default
        $(".mainaccordion:eq(0)").next(".subpanel").show();
        $(".mainaccordion:first").addClass("active");
        // Get hash from query string
        var hash = window.location.hash;
        if (hash) {
            // Get panel header element
            var requestedPanel = $(hash);
            if (requestedPanel.length) {
                // Hide all panels
                $(".subpanel").hide();
                $('.mainaccordion').removeClass("active"); // remove active
                // Show requested panel
                requestedPanel.next(".subpanel").show();
                requestedPanel.addClass("active"); //add active
            }
        };

        $('body').find('.mainaccordion').click(function() {
            //Expand or collapse this panel
            $(this).next().slideToggle('300');
            $('.mainaccordion').removeClass("active"); // remove active
            $(this).addClass("active"); // add active
            //Hide the other panels
            $(".subpanel").not($(this).next()).slideUp('fast');
        });
        $('body').find('.subpanelaccordion').click(function() {
            //Expand or collapse this panel
            $(this).next().slideToggle('300');
            $('.subpanelaccordion').removeClass("active"); // remove active
            $(this).addClass("active"); // add active
        });
        $('body').find('.subpanelaccordion1').click(function() {
            //Expand or collapse this panel
            $(this).next().slideToggle('300');
            $('.subpanelaccordion1').removeClass("active"); // remove active
            $(this).addClass("active"); // add active
        });
    });
</script>
<style>
  .mainaccordion {margin-left: 20px; cursor: pointer;}
  .subpanelaccordion { cursor: pointer;}
  .subpanelaccordion:after        { cursor: pointer; margin-left: 24px; color: #0000FF ; font-weight: bold; font-style: italic; content: "(more info \02795 )";}
  .subpanelaccordion.active:after { content: "(less info \2796 )";}
  .subpanel {margin-left: 40px; display: none;}
  .subpanelsubpanel {display: none;}
  .mainaccordion.active + .accordion-content { display: block; }
  .subpanelaccordion.active + .accordion-content { display: block; }
  .smallbold {font-weight:bold;font-size:85%}
</style>
</head>
<body>
<div id="accordion">
  <h4 class="mainaccordion" id="q1">Lorem ipsum dolor sit amet mauris eu turpis</h4>
  <div class="subpanel"><p>Select chapter to view.</p></div>

  <h4 class="mainaccordion" id="AAAA">Chapter AAAA</h4>
  <div class="subpanel"><p>Lorem ipsum dolor sit amet mauris eu turpis. <a href="#BBBB" onclick="setTimeout('history.go(0);',300);">Open BBBB.</a></p></div>

  <h4 class="mainaccordion" id="BBBB">Chapter BBBB</h4>
  <div class="subpanel"><p >Vivamus facilisisnibh scelerisque laoreet.
        <div class="subpanelaccordion">Lorem ipsum dolor sit amet mauris eu turpis: item 1.</div>
        <div class="subpanelsubpanel"><ul>
              <li><span class=smallbold>For a1,</span> the value is foo.</li>
              <li><span class=smallbold>For a2,</span> the value is foo.</li>
              </ul></div> 
              <p></p>
        <div class="subpanelaccordion">Lorem ipsum dolor sit amet mauris eu turpis: item 2.</div>
        <div class="subpanelsubpanel"><ul>
              <li><span class=smallbold>For a1,</span> the value is foo.</li>
              <li><span class=smallbold>For a2,</span> the value is foo.</li>
              </ul></div> 
              <p></p>
        <div class="subpanelaccordion">Lorem ipsum dolor sit amet mauris eu turpis: item 3.</div>
        <div class="subpanelsubpanel"><ul>
              <li><span class=smallbold>For a1,</span> the value is foo.</li>
              <li><span class=smallbold>For a2,</span> the value is foo.</li>
              </ul></div> 
    </p>
  </div>

  <h4 class="mainaccordion" id="DDDD">Chapter DDDD</h4>
  <div class="subpanel"><p class=margin40>Vivamus facilisisnibh scelerisque laoreet.</p></div>
</div></body>
</html>

Answer 1

您可以尝试这样做：这是你想要弥补的第二个手风琴，

$('body').find('.subpanelaccordion').click(function() {
            //Expand or collapse this panel
            $(this).next().slideToggle('300');
            if($(this).hasClass('active')){  //Here we check if elemnet has active class already the remove it otherwise add to it.
                $(this).removeClass("active");
             // remove active
            }
            else{
            $(this).addClass("active"); // add active
            }
        });

手风琴+/-内容字符串标记不起作用

1 个答案: