滑动切换和改变字形

Question

这是我的第一个项目，也是我的第一个 post，所以请放轻松 ;)

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

use <i class=""> </i> and css #hidden_content {display: none;} for hide your content

Live FIDDLE

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

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

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

Answer 2

您的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>

Answer 3

你可以用 boostrap toggle and jQuery.see this fiddle https://jsfiddle.net/creativeRosh/xde7cuyz/

$('#collapseDiv').on('shown.bs.collapse', function () {
       $(".glyphicon").removeClass("glyphicon-chevron-down").addClass("glyphicon-chevron-up");
    });

    $('#collapseDiv').on('hidden.bs.collapse', function () {
       $(".glyphicon").removeClass("glyphicon-chevron-up").addClass("glyphicon-chevron-down");
    });

滑动切换和改变字形

Slidetoggle and changing glyphicon

html

css

jquery

slidetoggle