javascript - jquery 切换附加删除

Question

这是一个带有子菜单的菜单。当我点击子菜单项时，我需要在菜单项“Everyday”旁边切换子菜单文本。像下图一样

(function($) {
    $(".menu .sub-menu li a").each(function() {
        var dayName = $(this).text();
        $(this).on("click", function() {
            $(this).closest(".menu").children("li").children("a").append('<span class="day-name">' + dayName + '</span>');
        });
    });
})(jQuery);

ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

a {
    text-decoration: none;
}

.menu > li {
    position: relative;
}

.menu > li > a {
    background-color: #eee;
    color: #333;
    display: inline-block;
    padding: 10px 20px;
}

.menu li:hover > .sub-menu {
    opacity: 1;
    visibility: visible;
}

.menu .sub-menu {
    position: absolute;
    left: 0;
    background-color: #fff;
    box-shadow: 0px 2px 2px 1px rgba(0, 0, 0, 0.2);
    min-width: 200px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease 0s;
}

.menu .sub-menu li {
}

.menu .sub-menu li a {
    color: #777;
    display: block;
    padding: 5px 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<ul class="menu">
    <li>
        <a href="#">Everyday</a>
        <ul class="sub-menu">
            <li><a href="#">Sat</a></li>
            <li><a href="#">Sun</a></li>
            <li><a href="#">Mon</a></li>
            <li><a href="#">Tue</a></li>
            <li><a href="#">Wed</a></li>
            <li><a href="#">Thu</a></li>
            <li><a href="#">Fri</a></li>
        </ul>
    </li>
</ul>

这就是我正在尝试的方法，但它不起作用。

Answer 1

您可以使用 Javascript 的 join & jQuery 的 - hasClass & toggleClass使用 on('click') 的方法像这样的事件:

参见 jsFiddle

或查看下面的代码片段:

$(function() {

  $('.menu .sub-menu li a').on('click', function(e) {
    
    $(this).toggleClass('selected');
    var txt = $('#title').text();
    var total_len = $('.menu .sub-menu li').length;
    var count = 0;
    var values = [];
    
    $('.menu .sub-menu li a.selected').each(function(i) {
      values.push($(this).text());
      count++;
    });
    
    if(count == total_len) {
      txt = "Every Day";
    } else {
      txt = "Every " + values.join(',');
    }
    $('#title').text(txt);

  });

})

ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

a {
    text-decoration: none;
}

.menu > li {
    position: relative;
}

.menu > li > a {
    background-color: #eee;
    color: #333;
    display: inline-block;
    padding: 10px 20px;
}

.menu li:hover > .sub-menu {
    opacity: 1;
    visibility: visible;
}

.menu .sub-menu {
    position: absolute;
    left: 0;
    background-color: #fff;
    box-shadow: 0px 2px 2px 1px rgba(0, 0, 0, 0.2);
    min-width: 200px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease 0s;
}

.menu .sub-menu li {
}

.menu .sub-menu li a {
    color: #777;
    display: block;
    padding: 5px 10px;
}

.menu .sub-menu li a.selected {
  color: red;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<ul class="menu">
    <li>
        <a id="title" href="#">Every </a>
        <ul class="sub-menu">
            <li><a href="#">Sat</a></li>
            <li><a href="#">Sun</a></li>
            <li><a href="#">Mon</a></li>
            <li><a href="#">Tue</a></li>
            <li><a href="#">Wed</a></li>
            <li><a href="#">Thu</a></li>
            <li><a href="#">Fri</a></li>
        </ul>
    </li>
</ul>