代码之家 › 专栏 › 技术社区 › Dolorosa

滑动切换不由不同功能工作

html jquery javascript

Dolorosa · 技术社区 · 7 年前

我试图创建一个可折叠的导航,如下所示。

我想要实现的是当我展开导航(选择类别)并选择导航栏将向上滑动的类别之一时。如您所见,在我选择了某个类别并再次单击“选择”按钮进行更改后,它不想展开/向下滑动。

我尝试了所有我知道的方法,从 slideUp / slideDown , slideToggle, and I also tried changing .css(“显示”)!=“无”) 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 回复 | 直到 7 年前

Roko C. Buljan 7 年前

你把事情复杂化了,而且做得很辛苦。

要解决您的问题,您应该动态地委托您的单击,因为您正在动态地重建按钮(通过使用 .html() )无缘无故!

所以一个快捷的方法是使用 .on() 具有动态事件委派的方法

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

例子:

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");
  }
});

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

我的建议是

把你所有的 .menu-list-section 变成一个共同的父母 <div> 和 .slideToggle() 在它上面(而不是在每个单独的ul元素上)。
使用样式 <button type="button"> (出于语义原因)具有描述性 aria 辅助功能标签。
使用 .toggleClass() 并描述在CSS中更改某些状态的类,而不是使用JS
使用 .text() 更改元素文本(如按钮的文本)以便保持元素是静态的,并且始终存在于DOM中(而不是不必要地重新构建HTML)

另外-在看了你的目标之后,我不认为 Select Category 每一排都有道理。
如果只通过单击 + 按钮。

-1

malik kurosaki 7 年前

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>