2016-12-27 2 views
1

Это меню с подменю. Мне нужно, когда я нажимаю на элемент подменю, текст подменю переключается рядом с пунктом меню «Everyday». Как на картинке ниже enter image description herejquery 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>

Это то, что я пытаюсь, но его не работает.

ответ

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>

+0

Я пытаюсь это сделать и у меня возникла проблема, когда у меня есть несколько пунктов меню, и я нажал на подменю, подменю день, нажатый в каждый пункт меню, вот это https://jsfiddle.net/morshedx/y5e1hrpd/ Как я могу это исправить? –

+0

@ MuhammadMorshed Убедитесь, что ваши селекторы верны. смешал его здесь: https://jsfiddle.net/y5e1hrpd/1/ –

+0

Спасибо, много :) –

1

Проверьте это fiddle.

Изменить JS, как показано ниже, и добавить расписание класс к «Каждому» якорю.

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

Вы можете использовать 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>

+0

Это именно то, что мне нужно, спасибо так много :) –

+0

Это делает некоторые избыточные проверки. Почему if-clause в каждом? Вы можете фильтровать элементы раньше. –

+0

@MuhammadMorshed - Почему вы удалили это как принятый ответ! Есть ли проблемы с этим? –

0

Вы можете попробовать это, как хорошо. вам нужно будет проверить, соответствует ли добавленный диапазон в списке дней общим дням.

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