文章/答案/技术大牛

发布

问引导下拉切换图标问题
EN

Stack Overflow用户

提问于 2015-10-15 17:38:35

回答 1查看 621关注 0票数 0

我在WordPress上为我创建的一些小部件使用Twitter引导程序“下拉菜单”，它运行得很好。但我想将图标更改为“减号”，当它删除内容时，当单击另一个“加号”-icon时，应该关闭“减号”。目前，它只会切换当前的“加法”。

<div class="dropdown toggle-details">
     <img src="">
     <h3>title</h3> 
     <h4><subtitle</h4>
     <a class="dropdown-toggle my-btn" type="button"  data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"><i class="fa fa-plus-circle"></i></a>
      <ul class="dropdown-menu" > 
         <li> <h6>item 1</h6></li> 
        <li><h6>item 2</h6></li>
    </ul>
</div>

我的剧本是

jQuery('a').click(function() {
jQuery(this).find('i').toggleClass('fa-minus-circle');
jQuery(this).find('fa-minus-circle').toggleClass('fa-plus-circle')});

twitter-bootstrap

plugins

回答 1

Stack Overflow用户

回答已采纳

发布于 2015-10-15 23:28:41

您在jQuery中缺少了一个点，所以jQuery现在正在寻找一个html元素，该元素的标签名为fa-减号。显然找不到它。

jQuery(this).find('.fa-minus-circle').toggleClass('fa-plus-circle')...

实际上，这也可能无法修复它，因为在该语句之后，您将在i元素上得到两个类。我想您可以使用css来解决这个问题，但是更干净的方法是将"i“元素默认为+图标，然后切换一个更语义的类名，比如"open”。

因此css：

i { /* show plus icon */ }
i.open { /* show minus icon */ }

和jQuery：

jQuery("a").on("click", function() {
    jQuery(this).find("i").toggleClass("open");
});

嘿-现在我把所有东西都打出来了，我看到你在用第二句话做什么了。所以，您只需要一个点，这样jquery就可以查找类名，而不是元素。

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/33155296

复制

相似问题

问引导下拉切换图标问题
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问引导下拉切换图标问题EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问引导下拉切换图标问题
EN