0

プレーンなjQueryで紛らわしい問題があります。ヘッダーの詳細がクリックされたかどうかに関係なく、最初の divdetailsPaneを常に開いたままにする必要があります。言い換えると、どの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

「not」メソッドを使用してこれを行います。これにより、最初のアンカーをクリックするかどうかに関係なく、「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フィドルです

于 2013-01-17T06:57:29.553 に答える