Slidetoggle and changing glyphicon

这是我的第一个项目，我的第一篇文章对我来说很简单;）Slidetoggle and changing glyphicon

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?并试图用它为我的项目。它工作了一次，但只有滑动工作和不断变化的glyphicon没有。

我真的可以在这里使用你的帮助。非常感谢！

来源

2016-09-15 Jassi

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

来源

2016-09-15 10:41:33 eisbehr

真棒做到这一点，太感谢你了eisbehr！这很棒！现在只有问题。我想在另外两个地方有这个按钮。我怎样才能做到这一点？只有第一个按钮有效。 – Jassi

那是因为'ids'是唯一的。使用'class'来识别你的按钮。 @Jassi – eisbehr

非常感谢你！现在一切正常。 – Jassi

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>

来源

2016-09-15 10:40:10

你可以boostrap切换和jQuery.see这个小提琴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"); 
    });

来源

2016-09-15 11:05:08

Slidetoggle and changing glyphicon

回答

相关问题