Question

拥有以下代码，工作正常：

<div class="btn-group"> 
    <a class="btn mini all" id="showall" href="javascript:void(0);" data-toggle="dropdown">All<i class="fa fa-angle-down "></i></a>
    <ul class="dropdown-menu">
        <li><a href="javascript:void(0);" class="none">None</a>
        </li>
        <li><a href="javascript:void(0);" class="read">Read</a>
        </li>
        <li><a href="javascript:void(0);" class="unread">Unread</a>
        </li>
    </ul>
</div>

现在我想做的就是如果我选择任何一个，它应该不在顶部而且都不在任何地方，与其他两个读取和未读相同

所以这是我尝试使用jquery，我缺少或重叠的东西所以它在切换时全部替换所有并且没有＃

$(document).on('click','.none',function(e) {
        $("#showall").html('').html("None <i class='fa fa-angle-down'></i>");
        $(".none").html('').html('All').removeClass('none').addClass('new');
    });
    $(document).on('click',".read", function(e) {
        var data = $("#showall").text();
        $("#showall").html('').html("Read <i class='fa fa-angle-down'></i>");
        $(".read").html('').html(data).removeClass('read').addClass('new');;
    });
    $(document).on('click',".unread", function(e) {
        var data = $("#showall").text();
        $("#showall").html('').html("Unread <i class='fa fa-angle-down'></i>");
        $(".unread").html('').html(data).removeClass('unread').addClass('new');
    });
    $(document).on('click',".new", function(e) {
        var data = $("#showall").text();
        $("#showall").html('').html("All <i class='fa fa-angle-down'></i>");
        $(".new").html('').html(data).removeClass('new read unread').addClass('none');
    });

Answer 1

首先，您应该为所有<a>项目提供一个公共课程，例如'可点击'。

然后你可以这样写：

// bind 'onclick' event to all your links
$('.clickable').click(function(event){
    // replaces your javascript:void(0) as Frondor suggests
    event.preventDefault();
    // if clicked element is not a direct child of '.btn-group' (currently 'selectall')
    if($(this).parent('.btn-group').lenght === 0){
        // move the direct child of '.btn-group' (currently 'selectall') after the clicked element
        $(this).after($('.btn-group>a'));
        // move the clicked element to the beginning of the '.btn-group'
        $('.btn-group').prepend($(this));
    }
});

我不确定您使用的所有这些类和ID是什么，特别是此<i>标记。但是如果你真的需要每次添加它们，你可以在这个事件回调中完成它。

Answer 2

如果您要尝试做的是交换主要（顶部）链接与dropdown-menu中点击的链接，您可以这样做：

$(function () {
    $(document).on('click', '.dropdown-menu a', function (e) {
        e.preventDefault();

        var ddClass = $(this).attr('class');
        var ddHref = $(this).attr('href');
        var ddText = $(this).text();        

        var $a = $('.btn-group a.btn');
        var aClass = $a.attr('class');
        var aId = $a.attr('id');
        var aHref = $a.attr('href');
        var aText = $a.text();

        $a.replaceWith(function () {
            var $newA = $('<a>', { 
                href: ddHref, 
                id: ddClass,
                class: aClass,
                'data-toggle': 'dropdown'                
            }).text(ddText);

            var $newI = $('<i>', { class: 'fa fa-angle-down' });         
            $newA.append($newI);

            return $newA;
        });

        $(this).replaceWith(function () {
            return $('<a>', { 
                href: aHref, 
                class: aId                
            }).text(aText);
        });
    });
});

Demo

注意：正如评论中所提到的，请避免使用href="javascript:void(0);"因为它与SEO混淆。

根据选择更改下拉文本

2 个答案: