jquery toggle anhängen entfernen

Question

Hier ist ein Menü mit Untermenü. Ich brauche das, wenn ich auf den Untermenüpunkt klicke, kann der Untermenütext neben dem Menüpunkt "Everyday" umschalten. Wie das Bild unten

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

Das ist, was ich versuche, aber seine nicht funktioniert.

Answer 1

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

Überprüfen Sie diese fiddle.

Ändern Sie JS wie folgt und fügen Sie Zeitplan Klasse zum Anker "Everyday" hinzu.

(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

können Sie Javascripts verwenden join & jQuery - hasClass & toggleClass Methoden mit on('click') Ereignis wie folgt aus:

Siehe jsFiddle

oder das Code-Snippet siehe unten:

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

können Sie versuchen, diese auch. Sie müssen überprüfen, ob der angehängte Bereich in der Tagesliste den gesamten Tagen entspricht.

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