手风琴菜单无法点击

时间：2018-06-07 12:52:23

标签： javascript html css

菜单显示正确，但无法点击（无法打开项目以显示子项），我是javascript的新手，因此不确定 javascript 是否正确。 我还为font-awesome样式表添加了一个链接，并使用它来获取菜单的图标。 这是最好的菜单方式，或者我可以不用javascript 

$(document).ready(function() {
  var Accordion = function(el, multiple) {
    this.el = el || {};

    this.multiple = multiple || false;

    var dropdownlink = this.el.find(".dropdownlink");
    dropdownlink.on(
      "click", {
        el: this.el,
        multiple: this.multiple
      },
      this.dropdown
    );
  };

  Accordion.prototype.dropdown = function(e) {
    var $el = e.data.el,
      $this = $(this),

      $next = $this.next();

    $next.slideToggle();
    $this.parent().toggleClass("open");

    if (!e.data.multiple) {

      $el
        .find(".submenuItems")
        .not($next)
        .slideUp()
        .parent()
        .removeClass("open");
    }
  };

  var accordion = new Accordion($(".accordion-menu"), false);
});
ul {
  list-style: none;
}

a {
  text-decoration: none;
}

.accordion-menu {
  width: 100%;
  max-width: 350px;
  margin: 60px auto 20px;
  background: #fff;
  border-radius: 4px;
}

.accordion-menu li.open .dropdownlink {
  color: #CDDC39;
}

.accordion-menu li.open .dropdownlink .fa-chevron-down {
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}

.accordion-menu li:last-child .dropdownlink {
  border-bottom: 0;
}

.dropdownlink {
  cursor: pointer;
  display: block;
  padding: 15px 15px 15px 45px;
  font-size: 18px;
  border-bottom: 1px solid #ccc;
  color: #212121;
  position: relative;
  transition: all 0.4s ease-out;
}

.dropdownlink i {
  position: absolute;
  top: 17px;
  left: 16px;
}

.dropdownlink .fa-chevron-down {
  right: 12px;
  left: auto;
}

.submenuItems {
  display: none;
  background: #C8E6C9;
}

.submenuItems li {
  border-bottom: 1px solid #B6B6B6;
}

.submenuItems a {
  display: block;
  color: #727272;
  padding: 12px 12px 12px 45px;
  transition: all 0.4s ease-out;
}

.submenuItems a:hover {
  background-color: #CDDC39;
  color: #fff;
}
<div>
  <ul class="accordion-menu">
    <li>
      <div class="dropdownlink"><i class="fa fa-user" aria-hidden="true"> 
          </i>
        <i class="fa fa-chevron-down" aria-hidden="true"></i>
      </div>
      <ul class="submenuItems">
        <li><a href="#">Personal1</a></li>
        <li><a href="#">Personal2</a></li>
      </ul>
    </li>
    <li>
      <div class="dropdownlink"><i class="fa fa-paper-plane" aria- hidden="true"></i> Leave
        <i class="fa fa-chevron-down" aria-hidden="true"></i>
      </div>
      <ul class="submenuItems">
        <li><a href="#">Leave1</a></li>
        <li><a href="#">Leave2</a></li>
      </ul>
    </li>
    <li>
      <div class="dropdownlink"><i class="far fa-sun" aria-hidden="true"> 
              </i> Configuration
        <i class="fa fa-chevron-down" aria-hidden="true"></i>
      </div>
      <ul class="submenuItems">
        <li><a href="#">Configuration1</a></li>
        <li><a href="#">Configuration</a></li>
      </ul>
    </li>
    <li>
      <div class="dropdownlink"><i class="fas fa-receipt" aria- hidden="true"></i> Report
        <i class="fa fa-chevron-down" aria-hidden="true"></i>
      </div>
      <ul class="submenuItems">
        <li><a href="#">Report1</a></li>
        <li><a href="#">Report2</a></li>
      </ul>
    </li>
    <li>
      <div class="dropdownlink"><i class="fas fa-align-justify" aria- hidden="true"></i> Attendance
        <i class="fa fa-chevron-down" aria-hidden="true"></i>
      </div>
      <ul class="submenuItems">
        <li><a href="#">Attendance1</a></li>
        <li><a href="#">Attendance2</a></li>
      </ul>
    </li>
  </ul>

1 个答案:

答案 0 :(得分：0)

在head标记中包含jquery并在html的末尾保留脚本标记，以确保它在加载html后运行。

 
ul {
  list-style: none;
}

a {
  text-decoration: none;
}

.accordion-menu {
  width: 100%;
  max-width: 350px;
  margin: 60px auto 20px;
  background: #fff;
  border-radius: 4px;
}

.accordion-menu li.open .dropdownlink {
  color: #CDDC39;
}
.accordion-menu li.open .dropdownlink .fa-chevron-down {
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}

.accordion-menu li:last-child .dropdownlink {
  border-bottom: 0;
}

.dropdownlink {
  cursor: pointer;
  display: block;
  padding: 15px 15px 15px 45px;
  font-size: 18px;
  border-bottom: 1px solid #ccc;
  color: #212121;
  position: relative;
  transition: all 0.4s ease-out;
}
.dropdownlink i {
  position: absolute;
  top: 17px;
  left: 16px;
}
.dropdownlink .fa-chevron-down {
  right: 12px;
  left: auto;
}

.submenuItems {
  display: none;
  background: #C8E6C9;
}
.submenuItems li {
  border-bottom: 1px solid #B6B6B6;
}

.submenuItems a {
  display: block;
  color: #727272;
  padding: 12px 12px 12px 45px;
  transition: all 0.4s ease-out;
}
.submenuItems a:hover {
  background-color: #CDDC39;
  color: #fff;
}
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<ul class="accordion-menu">
  <li>
    <div class="dropdownlink"><i class="fa fa-user" aria-hidden="true"> 
  </i> 
      <i class="fa fa-chevron-down" aria-hidden="true"></i>
    </div>
    <ul class="submenuItems">
      <li><a href="#">Personal1</a></li>
      <li><a href="#">Personal2</a></li>
    </ul>
  </li>
  <li>
    <div class="dropdownlink"><i class="fa fa-paper-plane" aria- 
       hidden="true"></i> Leave
      <i class="fa fa-chevron-down" aria-hidden="true"></i>
    </div>
    <ul class="submenuItems">
      <li><a href="#">Leave1</a></li>
      <li><a href="#">Leave2</a></li>
    </ul>
  </li>
  <li>
    <div class="dropdownlink"><i class="far fa-sun" aria-hidden="true"> 
      </i> Configuration
      <i class="fa fa-chevron-down" aria-hidden="true"></i>
    </div>
    <ul class="submenuItems">
      <li><a href="#">Configuration1</a></li>
      <li><a href="#">Configuration</a></li>
    </ul>
  </li>
  <li>
    <div class="dropdownlink"><i class="fas fa-receipt" aria- 
      hidden="true"></i> Report
      <i class="fa fa-chevron-down" aria-hidden="true"></i>
    </div>
    <ul class="submenuItems">
      <li><a href="#">Report1</a></li>
      <li><a href="#">Report2</a></li>
    </ul>
  </li>
  <li>
    <div class="dropdownlink"><i class="fas fa-align-justify" aria- 
       hidden="true"></i> Attendance
      <i class="fa fa-chevron-down" aria-hidden="true"></i>
    </div>
    <ul class="submenuItems">
      <li><a href="#">Attendance1</a></li>
      <li><a href="#">Attendance2</a></li>
    </ul>
  </li>
</ul>
</div>
<script type="text/javascript">
$(document).ready(function () {
    var Accordion = function (el, multiple) {
        this.el = el || {};

        this.multiple = multiple || false;

        var dropdownlink = this.el.find(".dropdownlink");
        dropdownlink.on(
          "click",
          { el: this.el, multiple: this.multiple },
          this.dropdown
        );
    };

    Accordion.prototype.dropdown = function (e) {
        var $el = e.data.el,
          $this = $(this),

          $next = $this.next();

        $next.slideToggle();
        $this.parent().toggleClass("open");

        if (!e.data.multiple) {

            $el
              .find(".submenuItems")
              .not($next)
              .slideUp()
              .parent()
              .removeClass("open");
        }
    };

    var accordion = new Accordion($(".accordion-menu"), false);
});

</script>

相关问题
最新问题