jquery - 滑动切换和改变字形

Question

这是我的第一个元素，也是我在这里的第一篇文章，所以请放轻松 ;)

jQuery 是我努力的方向。我想要一个带有向下箭头的按钮，以允许用户滑出更多信息，当我单击它时，它应该将该字形图标更改为向上。所以他们知道如何隐藏信息。

这是我目前拥有的:

HTML:

  <section id="about">
    <a name="about"></a>
      <div class="container">
       <h2>Über</h2>
        <p class="topDist">Hier steht erklärender Text über uns.</p>

     <a href="javascript:return false;" id="button" class="btn btn-primary  
     btn-lg">Mehr<i class="glyphicon glyphicon-menu-down"></i></a>

    <div id="hidden_content">Hier steht die detallierte Beschreibung. Dieser Text wird erst nach einem Klick auf den Button eingeblendet.</div>
     </div>
  </section>

jQuery

        $(document).ready(function(){
        $("#button").click(function(){
            $("#hidden_content").slideToggle("slow");
        });
    });

        $('#button').click( function(){
            $(this).find('i').toggleClass('glyphicon-menu-down').toggleClass('glyphicon-menu-up');
        });

我找到了这个 How do I change a glyphicon upon clicking it in Bootstrap 3.2?并尝试将它用于我的元素。它工作了一次，但后来只有 slidetoggle 工作了，而改变的 glyphicon 没有。

我真的需要你的帮助。 非常感谢!

Answer 1

您的 HTML 无效。变化:

<span i class="glyphicon glyphicon-menu-down"></i></span>

到

<span><i class="glyphicon glyphicon-menu-down"></i></span>

除此之外，您还可以将 click 监听器和 toggleClass 组合到一个调用中。

$(function() {
    $("#button").click(function() {
        $("#hidden_content").slideToggle("slow");
        $(this).find('i').toggleClass('glyphicon-menu-down glyphicon-menu-up');
    });
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<section id="about">
  <a name="about"></a>
  <div class="container">
    <h2>Über</h2>
    <p class="topDist">foo</p>
    <a href="javascript:return false;" id="button" class="btn btn-primary btn-lg">
      more
      <span><i class="glyphicon glyphicon-menu-down"></i></span>
    </a>
    <div id="hidden_content">bar</div>
  </div>
</section>