单击后退箭头无法在JavaScript中正常工作

时间：2018-09-26 13:10:52

标签： javascript jquery html css

这是我的html和JavaScript代码，在此任务中我需要帮助。多次进入子菜单后，填充元素变得混乱，图标被截断。 有时它可以正常工作，但是当我快速单击后退箭头时，它弄乱了填充物。

我也在分享屏幕截图。

$(document).ready(function() {

  // Variable declaration...
  var left, width, newLeft;

  // Add the "top-menu" class to the top level ul...
  $('.mobile-menu').children('ul').addClass('top-menu');

  // Add buttons to items that have submenus...
  $('.has_child_menu').append('<button class="arrow"><i class="fa fa-chevron-right"></i></button>');

  // Mobile menu toggle functionality
  $('.menu-toggle').on('click', function() {

    // Detect whether the mobile menu is being displayed...
    display = $('.mobile-menu').css("display");

    if (display === 'none') {

      // Display the menu...
      $('.mobile-menu').css("display", "block");

    } else {

      // Hide the mobile menu...
      $('.mobile-menu').css("display", "none");

      // and reset the mobile menu...
      $('.current-menu').removeClass('current-menu');
      $('.top-menu').css("left", "0");
      $('.back-button').css("display", "none");
    }
  });

  // Functionality to reveal the submenus...
  $('.arrow').on('click', function() {

    // The .current-menu will no longer be current, so remove that class...
    $('.current-menu').removeClass('current-menu');

    // Turn on the display property of the child menu
    $(this).siblings('ul').css("display", "block").addClass('current-menu');

    left = parseFloat($('.top-menu').css("left"));
    width = Math.round($('.mobile').width());
    newLeft = left - width;

    // Slide the new menu leftwards (into the .mobile viewport)...
    $('.top-menu').css("left", newLeft);

    // Also display the "back button" (if it is hidden)...
    if ($('.back-button').css("display") === "none") {
      $('.back-button').css("display", "flex");
    }

  });

  // Functionality to return to parent menus...
  $('.back-button').on('click', function() {

    // Hide the back button (if the current menu is the top menu)...
    if ($('.current-menu').parent().parent().hasClass('top-menu')) {
      $('.back-button').css("display", "none");
    }

    left = parseFloat($('.top-menu').css("left"));
    width = Math.round($('.mobile').width());
    newLeft = left + width;

    // Slide the new menu leftwards (into the .mobile viewport)...
    $('.top-menu').css("left", newLeft);

    // Allow 0.25 seconds for the css transition to finish...
    window.setTimeout(function() {

      // Hide the out-going .current-menu...
      $('.current-menu').css("display", "none");

      // Add the .current-menu to the new current menu...
      $('.current-menu').parent().parent().addClass('current-menu');

      // Remove the .current-menu class from the out-going submenu...
      $('.current-menu .current-menu').removeClass('current-menu');

    }, 250);

  });

});
body {
  margin: 0px;
  padding: 0px;
  font-family: 'Segoe UI';
}

.smart-list-container {
  max-width: 95%;
  margin: 10px auto;
}

.smart-list-header {
  background: #265a88;
  padding: 10px 0px;
}

.current-page-title {
  text-align: center;
}

.current-page-title h3 {
  color: #fff;
  margin: 0px;
}

.smart-row {}

.smart-list-icon {
  float: left;
  width: 60px;
}

.smart-list-icon .fa {
  font-size: 35px;
  padding-right: 20px;
}

.smart-descrption {
  float: right;
  width: calc(100% - 60px);
}

.smart-text {
  float: left;
}

.smart-text h3 {
  margin: 0;
}

.smart-right-btn {
  float: right;
}

.smart-right-btn .fa {
  font-size: 28px;
}

.sub-list {
  display: none;
}

.slide-smart-page {
  left: -100%;
  position: absolute;
  transition: 0.5s all ease;
}

body .slide-smart-sub-page {
  display: block;
}

.sub-list {
  background: #2196F3;
  height: 300px;
}


/*******switch-btn*******/

.smart-right-btn .switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
  margin-bottom: 0px;
}

.smart-right-btn .switch input {
  display: none;
}

.smart-right-btn .slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.smart-right-btn .slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

.smart-right-btn input:checked+.slider {
  background-color: #2196F3;
}

.smart-right-btn input:focus+.slider {
  box-shadow: 0 0 1px #2196F3;
}

.smart-right-btn input:checked+.slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}


/* Rounded sliders */

.smart-right-btn .slider.round {
  border-radius: 34px;
}

.smart-right-btn .slider.round:before {
  border-radius: 50%;
}


/*******switch-btn-end*******/

.smart-list-container .mobile {
  background: #fff;
  overflow: hidden;
  /* NB: Remove this overflow property if you want to get a better idea of what is happening "under the hood" */
  position: relative;
}

.smart-list-container .mobile-controls {
  background: #337ab7;
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
  padding: 10px;
}

.smart-list-container .mobile-controls button {
  background: none;
  border: none;
  border-radius: 8px;
  color: #fff;
  height: 40px;
  padding: 0 15px;
  outline: none;
  font-size: 18px;
}

.smart-list-container button:hover {
  cursor: pointer;
}

.smart-list-container .mobile-controls .back-button {
  display: none;
}

.smart-list-container .mobile-menu {
  background: #fff;
  display: none;
  height: 100%;
  left: 0;
  position: absolute;
  width: 100%;
  z-index: 10;
}

.smart-list-container ul {
  margin: 0;
  padding: 0;
  width: 100%;
  position: absolute;
  transition: 0.25s;
}

.smart-list-container li {
  border-bottom: 1px solid #ccc;
  display: flex;
  justify-content: space-between;
  list-style: none;
}

.smart-list-container li a {
  color: #000;
  flex: 3;
  padding: 10px 10px;
  text-decoration: none;
}

.smart-list-container li button {
  background: none;
  border: 0;
  flex: 1;
  text-align: right;
  padding: 10px;
}

.smart-list-container div>ul {
  top: 0;
  left: 0;
}

.smart-list-container div>ul ul {
  display: none;
  top: 0;
  left: 100%;
}


/* Content styles below here */

.smart-list-container section {
  line-height: 1.5;
  padding: 20px;
}

.smart-list-container h1 {
  font-size: 1.5rem;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="css/style.css" rel="stylesheet" />
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="smart-list-container">
  <div class="mobile">
    <div class="mobile-controls">
      <button class="menu-toggle">Page Name</button>
      <button class="back-button"><i class="fa fa-chevron-left"></i></button>
    </div>
    <div class="mobile-menu">
      <ul>
        <li>
          <a href="">
            <div class="smart-row">
              <div class="smart-list-item">
                <div class="smart-list-icon">
                  <span class="fa fa-cog"></span>
                </div>
                <div class="smart-descrption">
                  <div class="smart-text">
                    <h3>Face ID</h3>
                  </div>
                  <div class="smart-right-btn">
                    <label class="switch">
                                                    <input type="checkbox">
                                                    <span class="slider round"></span>
                                                </label>
                  </div>
                  <div class="clearfix"></div>
                </div>
                <div class="clearfix"></div>
              </div>
            </div>

          </a>
        </li>
        <li class="has_child_menu">
          <a href="">
            <div class="smart-row">
              <div class="smart-list-item">
                <div class="smart-list-icon">
                  <span class="fa fa-cog"></span>
                </div>
                <div class="smart-descrption">
                  <div class="smart-text">
                    <h3>Face ID</h3>
                  </div>
                  <div class="clearfix"></div>
                </div>
                <div class="clearfix"></div>
              </div>
            </div>
          </a>
          <ul>
            <li><a href="">Sub-list</a></li>
            <li class="has_child_menu">
              <a href="">Sub-list-inner</a>
              <ul>
                <li><a href="">Sub-list-inner</a></li>
                <li><a href="">Sub-list-inner</a></li>
                <li class="has_child_menu">
                  <a href="">Sub-list-inner</a>
                  <ul>
                    <li><a href="">Sub-list-inner</a></li>
                  </ul>
                </li>
                <li><a href="">Sub-list-inner</a></li>
                <li><a href="">Sub-list-inner</a></li>
              </ul>
            </li>
            <li><a href="">Sub-list</a></li>
            <li class="has_child_menu">
              <a href="">Sub-list-inner</a>
              <ul>
                <li><a href="">Sub-list-inner</a></li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </div>
    <section>
      <article>
        <h1>Mobile menu demo</h1>
        <p>Click the button above to see the mobile menu in action!</p>
        <p>The menu functionality was inspired by the Settings app in iOS.</p>
        <p>This implementation uses some jQuery and flexbox. The orginal code was written for a WordPress theme, so absolute positioning was used (rather than fixed positioning - which is easier) to avoid conflicts with the admin bar (when the user is logged-in).</p>
      </article>
    </section>
  </div>
</div>


<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

1 个答案:

答案 0 :(得分：-1)

执行转换：0.15s；而不是过渡：0.25s；在css文件中。

相关问题
最新问题