Это меню с подменю. Мне нужно, когда я нажимаю на элемент подменю, текст подменю переключается рядом с пунктом меню «Everyday». Как на картинке ниже jquery toggle append удалить
(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>
Это то, что я пытаюсь, но его не работает.
Я пытаюсь это сделать и у меня возникла проблема, когда у меня есть несколько пунктов меню, и я нажал на подменю, подменю день, нажатый в каждый пункт меню, вот это https://jsfiddle.net/morshedx/y5e1hrpd/ Как я могу это исправить? –
@ MuhammadMorshed Убедитесь, что ваши селекторы верны. смешал его здесь: https://jsfiddle.net/y5e1hrpd/1/ –
Спасибо, много :) –