Question

我希望在点击标题时显示ul的内容，但也会更改该标题旁边的图标。默认情况下，图标为向下箭头，单击时，ul应滑动打开，图标应更改为向上箭头，再次单击时，应更改为向下箭头等。

我可以让这一次发生，但是一旦点击标题两次只是保持向上箭头，我想再次将其更改为向下箭头等等。任何人都可以指出我正确的方向吗？

感谢。

我的HTML代码：

<h4 class="mobileDrop">Find Your Way Around <span><i class="fa fa-caret-down linkIcon"></i></span></h4>

<ul class="footerNav">
     <li><a href="#">1st List Item</a></li>
     <li><a href="#">2nd List Item</a></li>
     <li><a href="#">3rd List Item</a></li>
</ul>

我的代码JS：

// footer specifics
$( ".footerNav" ).hide();
// toggle on click
$( ".mobileDrop" ).click(function() {
    $( ".footerNav" ).slideToggle( 400, function()  {
        $( ".mobileDrop span" ).html( '<i class="fa fa-caret-up linkIcon"></i>' );  
    });
});

Answer 1

工作小提琴

http://jsfiddle.net/qY7as/3/

 $( ".footerNav" ).hide();
// toggle on click
$( ".mobileDrop" ).click(function() {
    $( ".footerNav" ).slideToggle( 400, function()  {

        $( ".mobileDrop span" ).html( '<i class="fa fa-caret-up linkIcon"></i>' );  

         var yourElement = $( ".mobileDrop span i").attr('class');
        //check class and give it what you want
        $( ".mobileDrop span i").attr('class','new value with class and new background icon');
    });
});

<h4 class="mobileDrop">Find Your Way Around 
    <span></span>
</h4>

<ul class="footerNav">
     <li><a href="#">1st List Item</a></li>
     <li><a href="#">2nd List Item</a></li>
     <li><a href="#">3rd List Item</a></li>
</ul>

Answer 2

假设您默认拥有一个caret-类：

// footer specifics
$( ".footerNav" ).hide();
// toggle on click
$( ".mobileDrop" ).click(function() {
$( ".footerNav" ).slideToggle( 400, function()  {
    $( ".mobileDrop span i" ).toggleClass('fa-caret-up').toggleClass('fa-caret-down');  
});
});

Answer 3

您无需更改html。只需切换课程。

$( ".mobileDrop" ).click(function() {
    var drop = $(this);
    $( ".footerNav" ).slideToggle( 400, function()  {
        drop.find('.fa.linkIcon').toggleClass('fa-caret-up fa-caret-down');
    });
});

Answer 4

试试这个：

$( ".footerNav" ).slideToggle( 400, function()  {
    var linkIcon = $(".linkIcon");
    if (linkIcon.hasClass('fa-caret-down')) {
        linkIcon.removeClass('fa-caret-down').addClass('fa-caret-up');
    } else {
        linkIcon.removeClass('fa-caret-up').addClass('fa-caret-down');
    }
});

Answer 5

您需要做的就是在课程之间切换：

$( ".mobileDrop span i" ).toggleClass('fa-caret-up ','fa-caret-down');

他们将根据点击的间隔自动切换课程。

<强> Demo

参考：

.toggleClass()

Answer 6

至于显示/不显示您可以使用的菜单：

$( ".mobileDrop" ).click(function() {
    $(".footerNav").toggle();
});

对于箭头，您可以使用两个类来表示不同的箭头，或者每次使用toggleClass

更改背景图像css

在slideToggle中更改内部跨度的html点击

6 个答案:

参考：