Question

我有一些标签可以在点击时显示隐藏的信息。但就像现在一样，它们会打开但只在单击新标签时关闭。如果可能的话，我可以帮助解决这两个问题：

1 - 我想再次点击它时再次关闭标签。

2 - 我设置了链接以打开每个部分开始的页面。无论如何，当点击该链接时，我可以自动打开标签吗？

我很感激帮助。

编辑以显示我现在的完整代码：

＆＃13;

$('.drop a').click(function() {
  var $content = $(this).parent().next().toggle();

  //HIDE THIS LINE IF YOU DO NOT WANT TO HIDE OTHER TABS ON CLICK
 $('.droptab').not($content).hide();
});

＆＃13;

.droptab {
  display: none
}

＆＃13;

<div class="child-page">

<a class="anchor" id="<?php echo $child->post_title; ?>"></a>        

<h2 class="child-title drop"><a><?php echo $child->post_title; ?><span class="down-arrow"><img src="down-arrow.png" /></span></a></h2>

<div class="droptab">

    <div class="description"><?php echo apply_filters('the_content', $child->post_content); ?></div>

    <aside class="sidebar">

        <div class="info">

            <div class="more-but">

                <a href="<?php the_field( 'get_more_url', $child->ID ); ?>" class="button left"><span class="caption">Get More Info</span></a>

            </div>

        </div>
                  
    </aside>

    <div style="clear: both;"></div>

</div><!-- .droptab -->

</div>

＆＃13;

Answer 1

使用切换代替隐藏显示。

toggle（）方法在hide（）和show（）之间切换所选元素。

隐藏此行“$（'。droptab'）。not（$ content）.hide（）;”如果您不想隐藏其他标签

$('.drop a').click(function() {
  var $content = $(this).parent().next().toggle();

  //HIDE THIS LINE IF YOU DO NOT WANT TO HIDE OTHER TABS ON CLICK
  $('.droptab').not($content).hide();
});

//ADD THIS LINE IF YOU WANT TO OPEN FIRST TAB BY DEFAULT ON PAGE LOAD
$('.droptab').first().toggle();

.droptab {
  display: none
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="dropdowntabs">
  <a class="anchor" id="main-tab"></a> 
  <h2 class="drop">
    <a>MAIN TITLE</a>
  </h2>
  <div class="droptab">
    <p>MAIN TITLE CONTENT</p>
  </div>
  <a class="anchor" id="second-tab"></a> 
  <h2 class="drop">
    <a>SECOND TITLE</a>
  </h2>
  <div class="droptab">
    <p>SECOND TITLE CONTENT</p>
  </div>
</div>

Answer 2

您可以使用toogle代替当前链接并隐藏其他链接：

$('.drop a').click(function() {
  var content = $(this).parent().next();
  $('.droptab').not(content).hide(200);
  $(content).toggle(200);
});

工作代码段

＆＃13;

$('.drop a').click(function() {
  var content = $(this).parent().next();
  $('.droptab').not(content).hide(200);
  $(content).toggle(200);
});

＆＃13;

.droptab {
  display: none
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="dropdowntabs">
  <a class="anchor" id="main-tab"></a> 
  <h2 class="drop">
    <a>MAIN TITLE</a>
  </h2>
  <div class="droptab">
    <p>MAIN TITLE CONTENT</p>
  </div>
  <a class="anchor" id="second-tab"></a> 
  <h2 class="drop">
    <a>SECOND TITLE</a>
  </h2>
  <div class="droptab">
    <p>SECOND TITLE CONTENT</p>
  </div>
</div>

＆＃13;

如何自动打开显示/隐藏JavaScript选项卡并在第二次点击时重新隐藏

2 个答案: