滑动切换不能通过不同的功能工作

时间：2018-05-30 05:15:55

标签： javascript jquery html

我尝试按如下方式创建可折叠导航。

我想要实现的是当我展开导航（选择类别）并选择导航栏将向上滑动的类别之一时。正如您所看到的，在我选择其中一个类别后，我想通过再次单击“选择”按钮来更改它，它不想展开/向下滑动。

我尝试了所有我认识的方式，从slideUp / slideDown，slideToggle, and I also tried changing。css（“display”）！=“none”）to。is（“visible”））`无济于事。

任何帮助表示赞赏！ ：）

$(document).ready(function() {
  
});

$(".menu-list-collapsible").click(function() {
  $(this).siblings().slideToggle();
  $(this).find("span i").toggleClass("rotate-collapsible");
});

$(".menu-list-collapsible-small").click(function() {
  mobileToggle();
  $(".menu-list-selected-small").toggleClass("menu-list-selected-small-border");
});

function mobileToggle() {
  if ($(".menu-list-section").css("display") != "none") {
    $(".menu-list-section").slideUp();
  }
  else {
    $(".menu-list-section").slideDown();
  }
}

$(".menu-list-entry").click(function() {
  if ($(window).width() >= 767) {
    var tempMenuRem;
    $(".menu-list-entry").each(function(i) {
      tempMenuRem = $(this).text();
      $(this).html("<span class='list-pointer'></span>" + tempMenuRem);
      $(this).removeClass("menu-list-selected");
    });
    var tempMenu = $(this).text();
    $(this).addClass("menu-list-selected");
    $(this).html("<span class='list-pointer'></span>" + tempMenu + "<span class='menu-list-entry-delete'><i class='fas fa-trash'></i></span>");
  }
  else {
    var tempMenuRem = $(this).text(); 
    $(".menu-list-selected-small").html("<span class='list-pointer'></span><span class='selected-name'>" + tempMenuRem + "<i class='fas fa-trash'></i></span><span class='menu-list-entry-delete'><span class='menu-list-collapsible-small'>Select Category<i class='fas fa-chevron-down'></i></span></span>");
    mobileToggle();
    $(".menu-list-selected-small").removeClass("menu-list-selected-small-border");
  }
});
.dashed-wrapper-menu-list {
  padding: 0;
}

.menu-list-sidebar {
  width: calc(50% - 384px); 
  height: 768px;
  background-color: #E7F7F0;
  padding: 32px 24px 24px 24px;
  border-right: solid 2px #008e5d;
}

.menu-list-title {
  font-weight: 700;
  color: #333;
  font-size: 17px;
  margin-bottom: 24px;
  cursor: pointer;
}

.menu-list-section li {
  height: 40px;
  line-height: 40px;
  color: #333;
  font-size: 13px;
  display: block;
  cursor: pointer; 
}

.menu-list-section .menu-list-collapsible {
  text-transform: uppercase;
  color: #00c983;
  font-weight: 700;
}

.menu-list-entry-delete,
.menu-list-title span,
.menu-list-collapsible span {
  float: right;
}

.menu-list-collapsible span i {
  font-size: 11px; 
  color: #aaa;
}

.menu-list-entry-delete i:hover,
.menu-list-title span i:hover,
.menu-list-collapsible span i:hover {
  color: #00c983;
}

.list-pointer {
  width: 10px;
  height: 10px;
  background-color: #00c983;
  display: inline-block;
  border-radius: 10px;
  margin-right: 16px;
  visibility: hidden;
}

.menu-list-selected {
  font-weight: 700;
}

.menu-list-selected span {
  visibility: visible; 
}

.rotate-collapsible {
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  transform: rotate(180deg); 
}

.menu-list-selected-small {
  display: none; 
  font-size: 13px;
  padding-bottom: 24px;
}

.menu-list-selected-small .list-pointer {
  visibility: visible; 
}

.menu-list-selected-small .fa-trash {
  margin-left: 8px; 
  font-size: 11px;
}

.menu-list-selected-small .fa-chevron-down {
  margin-left: 8px; 
  font-size: 11px;
}

.menu-list-collapsible-small {
  cursor: pointer; 
}

.fa-trash:hover {
  color: #FF7979;
}

@media (min-width: 768px) and (max-width: 1199px) {
  .menu-list-sidebar {
    width: 176px;
  }
}

@media (max-width: 767px) {
  .menu-list-sidebar {
    width: 100%;
    height: 100%;
    border-bottom: solid 2px #008e5d;
    border-right: none;
    padding-bottom: 0;
    overflow-y: auto;
  }
  
  .menu-list-selected-small {
    display: block; 
  }
  
  .menu-list-selected-small-border {
    border-bottom: solid 1px #ADCEC2;
  }
  
  .menu-list-section {
    display: none; 
  }
  
  .menu-list-collapsible span i {
    display: none; 
  }
  
  .menu-list-entry {
    display: block;
  }
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.11/css/all.css" integrity="sha384-p2jx59pefphTFIpeqCcISO9MdVfIm4pNnsL08A6v5vaQc4owkQqxMV8kg4Yvhaw/" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700,700i" rel="stylesheet">

<div class="dashed-wrapper dashed-wrapper-menu-list">
<div class="menu-list-sidebar">
  <div class="menu-list-title">Add Category<span><i class="fas fa-plus"></i></span></div>
  <div class="menu-list-selected-small"><span class="list-pointer"></span><span class="selected-name">Kacamata<i class="fas fa-trash"></i></span><span class="menu-list-entry-delete"><span class="menu-list-collapsible-small">Select Category<i class="fas fa-chevron-down"></i></span></span></div>
  <ul class="menu-list-section">
    <li class="menu-list-collapsible">Medical<span><i class="fas fa-chevron-down"></i></span></li>
    <li class="menu-list-entry"><span class="list-pointer"></span>Kacamata</li>
    <li class="menu-list-entry"><span class="list-pointer"></span>Gigi</li>
    <li class="menu-list-entry"><span class="list-pointer"></span>Rawat Inap</li>
    <li class="menu-list-entry"><span class="list-pointer"></span>Rawat Jalan</li>
  </ul>
  <ul class="menu-list-section">
    <li class="menu-list-collapsible">Travel<span><i class="fas fa-chevron-down"></i></span></li>
    <li class="menu-list-entry"><span class="list-pointer"></span>Transport</li>
    <li class="menu-list-entry"><span class="list-pointer"></span>Gasoline</li>
    <li class="menu-list-entry"><span class="list-pointer"></span>Travel</li>
  </ul>
  <ul class="menu-list-section">
    <li class="menu-list-collapsible">Entertainment<span><i class="fas fa-chevron-down"></i></span></li>
    <li class="menu-list-entry"><span class="list-pointer"></span>Meal</li>
  </ul>
  <ul class="menu-list-section">
    <li class="menu-list-collapsible">Others</li>
  </ul>
</div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

2 个答案:

答案 0 :(得分：2)

你过度复杂并且做得很艰难。

要解决您的问题，您应该动态委派您的点击，因为您无缘无故地动态重建按钮（使用.html()）！

因此，quickfix将使用.on()方法和动态事件委派

$("staticParent").on("eventName", "dynamicChild", function() {

示例：

＆＃13;
＆＃13; 
function mobileToggle() {
  if ($(".menu-list-section").css("display") !== "none") {
    $(".menu-list-section").slideUp();
  } else {
    $(".menu-list-section").slideDown();
  }
}


$(".dashed-wrapper-menu-list").on("click", ".menu-list-collapsible", function() {
  $(this).siblings().slideToggle();
  $(this).find("span i").toggleClass("rotate-collapsible");
});

$(".dashed-wrapper-menu-list").on("click", ".menu-list-collapsible-small", function() {
  mobileToggle();
  $(".menu-list-selected-small").toggleClass("menu-list-selected-small-border");
});


$(".dashed-wrapper-menu-list").on("click", ".menu-list-entry", function() {
  if ($(window).width() >= 767) {
    var tempMenuRem;
    $(".menu-list-entry").each(function(i) {
      tempMenuRem = $(this).text();
      $(this).html("<span class='list-pointer'></span>" + tempMenuRem);
      $(this).removeClass("menu-list-selected");
    });
    var tempMenu = $(this).text();
    $(this).addClass("menu-list-selected");
    $(this).html("<span class='list-pointer'></span>" + tempMenu + "<span class='menu-list-entry-delete'><i class='fas fa-trash'></i></span>");
  } else {
    var tempMenuRem = $(this).text();
    $(".menu-list-selected-small").html("<span class='list-pointer'></span><span class='selected-name'>" + tempMenuRem + "<i class='fas fa-trash'></i></span><span class='menu-list-entry-delete'><span class='menu-list-collapsible-small'>Select Category<i class='fas fa-chevron-down'></i></span></span>");
    mobileToggle();
    $(".menu-list-selected-small").removeClass("menu-list-selected-small-border");
  }
});
＆＃13; 
.dashed-wrapper-menu-list {
  padding: 0;
}

.menu-list-sidebar {
  width: calc(50% - 384px);
  height: 768px;
  background-color: #E7F7F0;
  padding: 32px 24px 24px 24px;
  border-right: solid 2px #008e5d;
}

.menu-list-title {
  font-weight: 700;
  color: #333;
  font-size: 17px;
  margin-bottom: 24px;
  cursor: pointer;
}

.menu-list-section li {
  height: 40px;
  line-height: 40px;
  color: #333;
  font-size: 13px;
  display: block;
  cursor: pointer;
}

.menu-list-section .menu-list-collapsible {
  text-transform: uppercase;
  color: #00c983;
  font-weight: 700;
}

.menu-list-entry-delete,
.menu-list-title span,
.menu-list-collapsible span {
  float: right;
}

.menu-list-collapsible span i {
  font-size: 11px;
  color: #aaa;
}

.menu-list-entry-delete i:hover,
.menu-list-title span i:hover,
.menu-list-collapsible span i:hover {
  color: #00c983;
}

.list-pointer {
  width: 10px;
  height: 10px;
  background-color: #00c983;
  display: inline-block;
  border-radius: 10px;
  margin-right: 16px;
  visibility: hidden;
}

.menu-list-selected {
  font-weight: 700;
}

.menu-list-selected span {
  visibility: visible;
}

.rotate-collapsible {
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  transform: rotate(180deg);
}

.menu-list-selected-small {
  display: none;
  font-size: 13px;
  padding-bottom: 24px;
}

.menu-list-selected-small .list-pointer {
  visibility: visible;
}

.menu-list-selected-small .fa-trash {
  margin-left: 8px;
  font-size: 11px;
}

.menu-list-selected-small .fa-chevron-down {
  margin-left: 8px;
  font-size: 11px;
}

.menu-list-collapsible-small {
  cursor: pointer;
}

.fa-trash:hover {
  color: #FF7979;
}

@media (min-width: 768px) and (max-width: 1199px) {
  .menu-list-sidebar {
    width: 176px;
  }
}

@media (max-width: 767px) {
  .menu-list-sidebar {
    width: 100%;
    height: 100%;
    border-bottom: solid 2px #008e5d;
    border-right: none;
    padding-bottom: 0;
    overflow-y: auto;
  }
  .menu-list-selected-small {
    display: block;
  }
  .menu-list-selected-small-border {
    border-bottom: solid 1px #ADCEC2;
  }
  .menu-list-section {
    display: none;
  }
  .menu-list-collapsible span i {
    display: none;
  }
  .menu-list-entry {
    display: block;
  }
}
＆＃13; 
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.11/css/all.css" integrity="sha384-p2jx59pefphTFIpeqCcISO9MdVfIm4pNnsL08A6v5vaQc4owkQqxMV8kg4Yvhaw/" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700,700i" rel="stylesheet">

<div class="dashed-wrapper dashed-wrapper-menu-list">
<div class="menu-list-sidebar">
  <div class="menu-list-title">Add Category<span><i class="fas fa-plus"></i></span></div>
  <div class="menu-list-selected-small"><span class="list-pointer"></span><span class="selected-name">Kacamata<i class="fas fa-trash"></i></span><span class="menu-list-entry-delete"><span class="menu-list-collapsible-small">Select Category<i class="fas fa-chevron-down"></i></span></span></div>
  <ul class="menu-list-section">
    <li class="menu-list-collapsible">Medical<span><i class="fas fa-chevron-down"></i></span></li>
    <li class="menu-list-entry"><span class="list-pointer"></span>Kacamata</li>
    <li class="menu-list-entry"><span class="list-pointer"></span>Gigi</li>
    <li class="menu-list-entry"><span class="list-pointer"></span>Rawat Inap</li>
    <li class="menu-list-entry"><span class="list-pointer"></span>Rawat Jalan</li>
  </ul>
  <ul class="menu-list-section">
    <li class="menu-list-collapsible">Travel<span><i class="fas fa-chevron-down"></i></span></li>
    <li class="menu-list-entry"><span class="list-pointer"></span>Transport</li>
    <li class="menu-list-entry"><span class="list-pointer"></span>Gasoline</li>
    <li class="menu-list-entry"><span class="list-pointer"></span>Travel</li>
  </ul>
  <ul class="menu-list-section">
    <li class="menu-list-collapsible">Entertainment<span><i class="fas fa-chevron-down"></i></span></li>
    <li class="menu-list-entry"><span class="list-pointer"></span>Meal</li>
  </ul>
  <ul class="menu-list-section">
    <li class="menu-list-collapsible">Others</li>
  </ul>
</div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
＆＃13;
＆＃13;
＆＃13;

我的建议是

  • 将您的所有.menu-list-section包装到公共父<div>和.slideToggle()上（而不是每个单独的UL元素）。
  • 使用带样式的<button type="button">（出于语义原因）和可访问性的描述性aria标签。
  • 使用.toggleClass()并描述在CSS中改变某些状态而不是使用JS
    • 的类
  • 使用.text()更改元素文本（例如按钮） - 为了保持您的元素静态并始终存在于DOM中（而不是不必要地重建HTML）

此外 - 在查看了您之后的内容之后，我并不认为每行都有多个Select Category是有意义的。
如果仅通过单击+按钮打开下拉列表。

答案 1 :(得分：-1)

var itm = document.querySelectorAll(".itm");
    itm.forEach(function(el){
        el.onclick = function(e){
            sum.click();
            sum.innerHTML = e.target.innerHTML;
        }
    })
ol li , ul li{
            list-style: none;
            list-style-type: none;
        }
for alternative dropdown may u us


<details>
  <summary id="sum">obat setres</summary>
  <ul>
    <li><a class="itm" href="#">panadol</a></li>
    <li><a class="itm" href="#">mi goreng</a></li>
    <li><a class="itm" href="#">es kepal</a></li>
    <li><a class="itm" href="#">cewek</a></li>
  </ul>
</details>

相关问题
最新问题