Question

我希望更改此菜单可点击以悬停。当我这样做时，不要工作：/

我必须添加更多文字，但对于知道javascript的人来说问题很简单。抱歉我的语言不好。我必须添加更多文本，但问题很简单，谁知道javascript好。抱歉我的语言不好。我必须添加更多文本，但问题很简单，谁知道javascript好。抱歉我的语言不好。

(function($, undefined)
{
    var open = [];

    var opts = {
        selector: '.dropdown',
        toggle: 'dropdown-toggle',
        open: 'dropdown-open',
        nest: true
    };

    $(document).on('click.dropdown touchstart.dropdown', function(e)
    {
        // Close the last open dropdown if click is from outside the target dropdown
        if ( open.length && ( ! opts.nest || ! open[ open.length - 1 ].find( e.target ).length ) )
        {
            open.pop().removeClass( opts.open );
        }

        var $this = $(e.target);

        // If target is a dropdown then toggle it...
        if ( $this.hasClass( opts.toggle ) )
        {
            e.preventDefault();

            $this = $this.closest( opts.selector );

            if ( ! $this.hasClass( opts.open ) )
            {
                open.push( $this.addClass( opts.open ) );
            }
            else
            {
                open.pop().removeClass( opts.open );
            }
        }
    });

})(jQuery);

.Row
{
    display: table;
    width: 100%;
    table-layout: fixed;
    border-spacing: 10px;
}
.Column
{
    display: table-cell;
    background-color: red;
}


.dropdown {
    position:relative;
    min-width:100%;
    background:#ccc;
    display: inline-block;
}
    .dropdown a {
        display:block;
        text-decoration:none;
        color:#333;
    }

    /* toggle */
    .dropdown .dropdown-toggle {
        padding:0;
    }

    /* dropdown */
    .dropdown-menu {
        position:absolute;
        top:100%;
        right:0;
        left:0;
        display:none;
        margin:0;
        padding:0;
        list-style-type:none;
        background:#ccc;
    }
        /* options */
        .dropdown-menu .option a {
        }
            .dropdown-menu .option a:hover {
                background-color:#aaa;
            }

    /* open */
    .dropdown-open {
        z-index:400;
    }
        .dropdown-open > .dropdown-menu {
            display:block;
        }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="Row">
    <div class="Column">
      <div id="locale" class="dropdown">
      <a href="#locale" class="dropdown-toggle">English</a>
      <ul class="dropdown-menu">
          <li class="option"><a href="#">French</a></li>
          <li class="option"><a href="#">German</a></li>
          <li class="option"><a href="#">Arabic</a></li>
          <li class="option"><a href="#">Chinese</a></li>
      </ul>
      </div>
    </div>
    <div class="Column">
      <div id="locale" class="dropdown">
      <a href="#locale" class="dropdown-toggle">English</a>
      <ul class="dropdown-menu">
          <li class="option"><a href="#">French</a></li>
          <li class="option"><a href="#">German</a></li>
          <li class="option"><a href="#">Arabic</a></li>
          <li class="option"><a href="#">Chinese</a></li>
      </ul>
      </div>
    </div>
    <div class="Column">
        <div id="locale" class="dropdown">
      <a href="#locale" class="dropdown-toggle">English</a>
      <ul class="dropdown-menu">
          <li class="option"><a href="#">French</a></li>
          <li class="option"><a href="#">German</a></li>
          <li class="option"><a href="#">Arabic</a></li>
          <li class="option"><a href="#">Chinese</a></li>
      </ul>
      </div>
    </div>
</div>

Answer 1

将$(document).on('click.dropdown touchstart.dropdown', function(e)更改为$(document).on( 'mouseenter touchstart','.dropdown', function(e) {

<强>演示

(function($, undefined) {
  var open = [];

  var opts = {
    selector: '.dropdown',
    toggle: 'dropdown-toggle',
    open: 'dropdown-open',
    nest: true
  };

  $(document).on( 'mouseenter touchstart','.dropdown', function(e) {
    // Close the last open dropdown if click is from outside the target dropdown
    if (open.length && (!opts.nest || !open[open.length - 1].find(e.target).length)) {
      open.pop().removeClass(opts.open);
    }

    var $this = $(e.target);

    // If target is a dropdown then toggle it...
    if ($this.hasClass(opts.toggle)) {
      e.preventDefault();

      $this = $this.closest(opts.selector);

      if (!$this.hasClass(opts.open)) {
        open.push($this.addClass(opts.open));
      } else {
        open.pop().removeClass(opts.open);
      }
    }
  });

})(jQuery);

.Row {
  display: table;
  width: 100%;
  table-layout: fixed;
  border-spacing: 10px;
}

.Column {
  display: table-cell;
  background-color: red;
}

.dropdown {
  position: relative;
  min-width: 100%;
  background: #ccc;
  display: inline-block;
}

.dropdown a {
  display: block;
  text-decoration: none;
  color: #333;
}


/* toggle */

.dropdown .dropdown-toggle {
  padding: 0;
}


/* dropdown */

.dropdown-menu {
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  display: none;
  margin: 0;
  padding: 0;
  list-style-type: none;
  background: #ccc;
}


/* options */

.dropdown-menu .option a {}

.dropdown-menu .option a:hover {
  background-color: #aaa;
}


/* open */

.dropdown-open {
  z-index: 400;
}

.dropdown-open>.dropdown-menu {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="Row">
  <div class="Column">
    <div id="locale" class="dropdown">
      <a href="#locale" class="dropdown-toggle">English</a>
      <ul class="dropdown-menu">
        <li class="option"><a href="#">French</a></li>
        <li class="option"><a href="#">German</a></li>
        <li class="option"><a href="#">Arabic</a></li>
        <li class="option"><a href="#">Chinese</a></li>
      </ul>
    </div>
  </div>
  <div class="Column">
    <div id="locale" class="dropdown">
      <a href="#locale" class="dropdown-toggle">English</a>
      <ul class="dropdown-menu">
        <li class="option"><a href="#">French</a></li>
        <li class="option"><a href="#">German</a></li>
        <li class="option"><a href="#">Arabic</a></li>
        <li class="option"><a href="#">Chinese</a></li>
      </ul>
    </div>
  </div>
  <div class="Column">
    <div id="locale" class="dropdown">
      <a href="#locale" class="dropdown-toggle">English</a>
      <ul class="dropdown-menu">
        <li class="option"><a href="#">French</a></li>
        <li class="option"><a href="#">German</a></li>
        <li class="option"><a href="#">Arabic</a></li>
        <li class="option"><a href="#">Chinese</a></li>
      </ul>
    </div>
  </div>
</div>

Answer 2

使用css：

.dropdown:hover > ul{
   display:block;
}

Answer 3

我试图了解并优化您的代码。

由于我无法理解“开放”变量的必要性，我将其删除并创建了一个可实现您想要的工作片段：
（查看我的代码段中的评论以获取更多详细信息）

(function($, undefined) {
  // var open = []; // I removed that, but it could be added back

  var opts = {
    selector: '.dropdown',
    toggle: 'dropdown-toggle',
    open: 'dropdown-open',
    nest: true
  };

  // TAKIT: Changed with below
  //  $(document).on('click.dropdown touchstart.dropdown', function(e) { 
  $('.dropdown').on('mouseenter touchstart', function(e) {
  
    /* TAKIT: Replaced some code here */
    $('.dropdown-open').removeClass(opts.open);

    
    // If target is a dropdown then toggle it...
    var $this = $(e.target);
    if ($this.hasClass(opts.toggle)) {
      e.preventDefault();
      $this = $this.closest(opts.selector);
      if (!$this.hasClass(opts.open)) {
        $this.addClass(opts.open);
      }
    }
  });
  
  // TAKIT: Added the below
  $('.dropdown').on('mouseleave touchend', function(e) {
    // Close all the dropdowns
    $('.dropdown-open').removeClass(opts.open);
  });

})(jQuery);

.Row {
  display: table;
  width: 100%;
  table-layout: fixed;
  border-spacing: 10px;
}

.Column {
  display: table-cell;
  background-color: red;
}

.dropdown {
  position: relative;
  min-width: 100%;
  background: #ccc;
  display: inline-block;
}

.dropdown a {
  display: block;
  text-decoration: none;
  color: #333;
}


/* toggle */

.dropdown .dropdown-toggle {
  padding: 0;
}


/* dropdown */

.dropdown-menu {
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  display: none;
  margin: 0;
  padding: 0;
  list-style-type: none;
  background: #ccc;
}


/* options */

.dropdown-menu .option a {}

.dropdown-menu .option a:hover {
  background-color: #aaa;
}


/* open */

.dropdown-open {
  z-index: 400;
}

.dropdown-open>.dropdown-menu {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="Row">
  <div class="Column">
    <div id="locale" class="dropdown">
      <a href="#locale" class="dropdown-toggle">English</a>
      <ul class="dropdown-menu">
        <li class="option"><a href="#">French</a></li>
        <li class="option"><a href="#">German</a></li>
        <li class="option"><a href="#">Arabic</a></li>
        <li class="option"><a href="#">Chinese</a></li>
      </ul>
    </div>
  </div>
  <div class="Column">
    <div id="locale" class="dropdown">
      <a href="#locale" class="dropdown-toggle">English</a>
      <ul class="dropdown-menu">
        <li class="option"><a href="#">French</a></li>
        <li class="option"><a href="#">German</a></li>
        <li class="option"><a href="#">Arabic</a></li>
        <li class="option"><a href="#">Chinese</a></li>
      </ul>
    </div>
  </div>
  <div class="Column">
    <div id="locale" class="dropdown">
      <a href="#locale" class="dropdown-toggle">English</a>
      <ul class="dropdown-menu">
        <li class="option"><a href="#">French</a></li>
        <li class="option"><a href="#">German</a></li>
        <li class="option"><a href="#">Arabic</a></li>
        <li class="option"><a href="#">Chinese</a></li>
      </ul>
    </div>
  </div>
</div>

如果有的话，请随意发表评论。

希望它有所帮助。

如何将此单击菜单更改为悬停菜单？

3 个答案: