Question

我对普通的 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>

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

Answer 2

您可以尝试使用此代码来解决此问题

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

始终在jquery中保持div的第一个块

2 个答案: