bugfix> javascript > 投稿

このメニューをクリックしてホバーするように変更したい。私がこれを行うと動作しません:/

さらにテキストを追加する必要がありますが、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>

回答 3 件
  • あなたのコードを理解し、最適化しようとしました。

    「open」変数の必要性を理解できないので、
    私はそれを削除し、あなたが望むものを達成する作業スニペットを作成しました:
    (詳細については、スニペットのコメントを確認してください)

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

    もしあればコメントしてください。

    それが役に立てば幸い。

  • $(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>
    
    

  • cssの使用:

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

あなたの答え