0

我对普通的jQuery有一个令人困惑的问题。无论何时单击标题详细信息，我都需要使第一个 div detailsPane始终保持打开状态。换句话说，无论单击哪个 div 的任何标题，div detailsPane 都应该始终保持打开状态。但我希望其余的能够像切换一样单击打开和关闭。

HTML 如下

            <div class="petStockAccordion">
            <div id="accordion">
            <!-- DETAILS -->
              <h2 class="current">
                <a href="#tab-details" class="tab_01">
                    details
                </a>
              </h2>
              <div class="pane detailsPane" style="display:block">
                    DIV 1
              </div>
            <!-- Ingredients -->    
              <h2>
                <a href="#tab-reviews" class="tab_02">
                    ingredients
                </a>
              </h2>
              <div class="pane">
                This needs further work.
              </div>
            <!-- Delivery -->   
              <h2>
                <a href="#tab-deliveryTab" class="tab_03">
                    delivery

                </a>
              </h2>
              <div class="pane">
                    Div3
              </div>
            <!-- Reviews -->    
              <h2>
                <a href="#tab-reviews" class="tab_04">
                    reviews

                </a>
              </h2>
              <div class="pane">
                DIV4

              </div>
            </div>
            </div>

jquery部分在下面

            <script type="text/javascript">
            function initMenu() {
              $('.petStockAccordion #accordion .pane').hide();
              $('.petStockAccordion #accordion .detailsPane').show();
              $('#accordion h2 a').click(
                function() {         $(this).parent('h2').next('div').slideToggle('fast');    
                  }
                );
              }
            $(document).ready(function() {initMenu();}); 
            </script>
4

2 回答 2

1

这样做，使用“不”的方法。如果您单击第一个锚点，这将使“detailsPane”div 保持打开状态。

<script type="text/javascript">
function initMenu(){
    $('.petStockAccordion #accordion .pane').not('.detailsPane').hide();
    $('#accordion h2 a').click(function() {                          
          $(this).parent('h2').next('div.pane').not('.detailsPane').slideToggle('fast');    
     });
    $(document).ready(function(){ initMenu(); });
</script>
于 2013-01-17T06:56:17.163 回答
0

你可以试试这个代码来解决它

function initMenu() {

              $('.petStockAccordion #accordion .pane').hide();
              $('.petStockAccordion #accordion .detailsPane').show();
              $('#accordion h2 a').click(
                function() {         $(this).parent('h2').next('div').slideToggle('fast');    
                           $('.petStockAccordion  #accordion .detailsPane').show(); 
                  }
                );
              }

            $(document).ready(function() {initMenu();});

这是工作中的JS Fiddle

于 2013-01-17T06:57:29.553 回答