Question

我在WordPress上使用 Twitter Bootstraps “下拉菜单”为我创建的一些小部件，它工作正常。但是我想在删除内容时将图标更改为“减号”，当点击另一个“加” - 图标时，“减号”应该关闭。目前它只会切换当前的“加号”。

<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')});

Answer 1

你在jQuery中缺少一个点，所以现在jQuery正在“a”元素中寻找一个带有标签名称fa-minus-circle的html元素。显然没有找到它。

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查找类名而不是元素。

Bootstrap Dropdown切换图标问题

1 个答案: