jquery toggle append remove

Question

Here is a menu with submenu. I need that when I click on the submenu item, submenu text toggle beside menu item "Everyday". Like the image below

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

This is what I'm trying, but its does not work.

Answer 1

You can use Javascript's join & jQuery's - hasClass & toggleClass methods with on('click') event like this:

See jsFiddle

or see the code snippet below:

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

Answer 2

Check this fiddle .

Change JS as below and add schedule class to the "Everyday" anchor.

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

Answer 3

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

Answer 4

You can try this as well. you will have to check if the appended span in the days list is equal to total days.

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