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

回答

相關問題