jquery toggle append remove

这里是一个菜单子菜单。我需要的是，当我点击子菜单项时，菜单项“每天”旁边的子菜单文本切换。像下面 jquery toggle append remove

(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>

图像这是我想要的，但它不能正常工作。

来源

2016-12-27 Muhammad Morshed

(function($) { 
 
    $(".menu .sub-menu li a").on("click", function() { 
 
    var $this = $(this); 
 

 
    if (this.hasAttribute("data-selected")) { 
 
     $this.removeAttr("data-selected"); 
 
    } else { 
 
     $this.attr("data-selected", 'true'); 
 
    } 
 

 
    $this.closest(".menu").find(" > li > a").html(fillButton); 
 
    }); 
 

 
    function fillButton() { 
 
    var options = $(this).next(".sub-menu").find("li a"); 
 
    if (options.filter("[data-selected]").length > 0) { 
 
     if (options.length === options.filter("[data-selected]").length) { 
 
     return "Every day"; 
 
     } else { 
 
     var html = "Every "; 
 
     options.filter("[data-selected]").each(function(i, el) { 
 
      html += (i > 0) ? ", " + $(el).text() : $(el).text(); 
 
     }); 
 
     return html; 
 
     } 
 
    } else { 
 
     return "Never"; 
 
    } 
 
    } 
 
})(jQuery);

ul { 
 
    margin: 0; 
 
    padding: 0; 
 
    list-style: none; 
 
} 
 
a { 
 
    text-decoration: none; 
 
} 
 
a[data-selected] { 
 
    background: #f0f0f0; 
 
} 
 
.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="#">Never</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>

来源

2016-12-27 16:25:06

我正在尝试我有一个问题，当我有多个菜单项，我点击子菜单，子菜单一天推入每个菜单项，这里是https://jsfiddle.net/morshedx/y5e1hrpd/ 我该如何解决这个问题？ –

@ MuhammadMorshed确保你的选择器是正确的在这里固定它：https://jsfiddle.net/y5e1hrpd/1/ –

谢谢你哟多:) –

检查这个fiddle。

更改JS如下，并将计划类添加到“Everyday”锚。

(function($) { 
    var currentValue = []; 

    function renderValue(){ 
     var content = "Everyday "; 

     $('.schedule').text(content + currentValue.join(' ')); 
    }  

    $(".menu .sub-menu li a").each(function() { 
     var dayName = $(this).text(); 
     $(this).on("click", function() { 
      var el = $(this), 
      id = el.attr('data-id'); 

      currentValue[id] = currentValue[id] ? undefined : el.text(); 
      renderValue(); 
     }); 
    }); 

})(jQuery);

来源

2016-12-27 16:05:33

您可以使用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>

来源

2016-12-27 16:07:07

这正是我需要的，太感谢你了:) –

这做一些多余的检查。为什么在每个条款中的if-条款？您可以在之前过滤元素。 –

@MuhammadMorshed - 你为什么把这个视为已接受的答案！这有什么问题吗？ –

你可以试试这一点。您将必须检查天数列表中的附加跨度是否等于总天数。

(function($) { 
 

 
    $(".menu").children("li").children("a.all").hide(); 
 

 
    $(".menu .sub-menu li a").each(function() { 
 
    var dayName = $(this).text(); 
 

 
    $(this).on("click", function() { 
 

 
     var li = $(this).closest(".menu").children("li"); 
 
     if ($(".menu .sub-menu li").length == $(".menu li a.days span").length + 1 && li.children("a.all").is(":visible") == false) { 
 
     li.children("a.days").hide(); 
 
     li.children("a.all").show(); 
 
     li.children("a.days").append('<span class="day-name">, ' + dayName + '</span>'); 
 
     } else { 
 
     li.children("a.all").hide(); 
 
     li.children("a.days").show(); 
 

 
     if (li.children("a.days").children("span:contains('" + dayName + "')").length == 0) { 
 
      li.children("a.days").append('<span class="day-name">, ' + dayName + '</span>'); 
 
     } else { 
 
      li.children("a.days").children("span:contains('" + dayName + "')").remove(); 
 
     } 
 
     } 
 
    }); 
 
    }); 
 
})(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="#" class="days">Every</a> 
 
    <a href="#" class="all">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>

来源

2016-12-27 16:52:53 Deep

jquery toggle append remove

回答

相关问题