Question

这是我的第一个项目，也是我在这里的第一篇文章，所以对我很轻松;）

jQuery是我正在努力的方向。我希望有一个箭头指向下方的按钮，允许用户滑出更多的信息，当我点击它时，它应该改变该glyphicon指向。所以他们了解如何隐藏信息。

这就是我目前的情况：

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?并试图将它用于我的项目。它工作了一次，但之后只有幻灯片工作和改变的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切换和jQuery执行此操作。请查看此小提琴https://jsfiddle.net/creativeRosh/xde7cuyz/

{{1}}

滑动和改变glyphicon

3 个答案: