单击其他链接后，我需要隐藏旧的链接数据

Question

工作原理图片：

我设置了链接，当您点击它时，会在其下方显示一些文本数据。单击其他链接后，我需要隐藏上一个单击链接中的数据。这是我到目前为止所做的。

$('#area7').click(function () {
    $('#output').empty();
    factory.getAttrData()
    .then((data) =>{
        data.forEach(element => {
            if (element.area_id === 7){
                $('#output').append(attrHBS(element));            }

        });
    });
});


 $(document).on("click", ".test", function(){
     $(this).next().slideToggle();
 });


//this is the appended code in handlebars
  <div>
    <h4 class ="test">
        <a href="#">{{name}}_({{type_id}})
        </a>
    </h4>
    <div id="show" class ="hidden">{{description}}
        <br>
        {{#if times}}{{times}}
        {{/if}}
    </div>
</div>

Answer 1

这在许多UI库中称为 Accordion 。这是一个简单的实现。它使用委托事件处理程序，因此动态添加到DOM应该不是问题。您将看到我们可以使用CSS中的+运算符和jQuery中的.next（）方法来定位可折叠部分。您真正需要的是将这些部分包装在一个容器中，以帮助您在js中识别它们。

＆＃13;

＆＃13;

$( document ).on( 'click', ' .accordion h4', function() {

  let isOpen = $( this ).next( 'div').is(':visible');
  
  $( ' .accordion h4 + div' ).slideUp();

  if ( ! isOpen ) {
    $( this ).next().stop().slideDown();
  }
  
});

＆＃13;

.accordion h4 {
  cursor: pointer;
  text-decoration: underline;
}
.accordion h4:hover {
  text-decoration: none;
}

.accordion h4 + div {
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="accordion">
<h4 class="handle">Section 1</h4>
<div>
  <p>Content for section 1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam semper ultrices sapien nec commodo. Pellentesque consectetur lacinia ornare. Morbi sit amet elementum mi. Nam sagittis turpis eget mi sollicitudin hendrerit. Mauris eget fermentum urna. Duis eu sapien finibus, pharetra tortor eu, faucibus lectus.</p>
  <p>Curabitur risus ligula, tincidunt at tristique ac, porttitor pellentesque tellus. Ut a cursus purus. In dolor tortor, finibus quis semper eu, tristique a urna. Quisque nisi dolor, scelerisque vel cursus sed, lacinia ac metus. Maecenas pretium hendrerit interdum. Nam mattis augue vel varius elementum. Sed mollis, libero sit amet tempus vestibulum, quam leo imperdiet odio, iaculis lobortis tellus odio vel orci. Suspendisse potenti. Ut ut nunc vulputate, tempus eros id, scelerisque est. Curabitur tincidunt nisl nisl, scelerisque ultrices urna condimentum sed</p>
  </div>
  <h4 class="handle">Section 2</h4>
<div>
  <p>Content for section 1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam semper ultrices sapien nec commodo. Pellentesque consectetur lacinia ornare. Morbi sit amet elementum mi. Nam sagittis turpis eget mi sollicitudin hendrerit. Mauris eget fermentum urna. Duis eu sapien finibus, pharetra tortor eu, faucibus lectus.</p>
  <p>Curabitur risus ligula, tincidunt at tristique ac, porttitor pellentesque tellus. Ut a cursus purus. In dolor tortor, finibus quis semper eu, tristique a urna. Quisque nisi dolor, scelerisque vel cursus sed, lacinia ac metus. Maecenas pretium hendrerit interdum. Nam mattis augue vel varius elementum. Sed mollis, libero sit amet tempus vestibulum, quam leo imperdiet odio, iaculis lobortis tellus odio vel orci. Suspendisse potenti. Ut ut nunc vulputate, tempus eros id, scelerisque est. Curabitur tincidunt nisl nisl, scelerisque ultrices urna condimentum sed</p>
  </div>
  <h4 class="handle">Section 3</h4>
<div>
  <p>Content for section 3. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam semper ultrices sapien nec commodo. Pellentesque consectetur lacinia ornare. Morbi sit amet elementum mi. Nam sagittis turpis eget mi sollicitudin hendrerit. Mauris eget fermentum urna. Duis eu sapien finibus, pharetra tortor eu, faucibus lectus.</p>
  <p>Curabitur risus ligula, tincidunt at tristique ac, porttitor pellentesque tellus. Ut a cursus purus. In dolor tortor, finibus quis semper eu, tristique a urna. Quisque nisi dolor, scelerisque vel cursus sed, lacinia ac metus. Maecenas pretium hendrerit interdum. Nam mattis augue vel varius elementum. Sed mollis, libero sit amet tempus vestibulum, quam leo imperdiet odio, iaculis lobortis tellus odio vel orci. Suspendisse potenti. Ut ut nunc vulputate, tempus eros id, scelerisque est. Curabitur tincidunt nisl nisl, scelerisque ultrices urna condimentum sed</p>
  </div>
  </div>

＆＃13;

＆＃13;

＆＃13;