3

基本的なjQueryドロップダウンメニューがあり、モバイルデバイス、特に電話でテストしています。

私が遭遇した問題の1つは、1つ以上の項目のテキストが長すぎるために、右側のサブメニューが画面の端から外れることがあるということです。もちろん、ユーザーは少し右にスクロールできますが、それは優れたソリューションではありません。ここにも同様の質問がありますが、提案された回答を機能させることができませんでした（さらに、JS / jQueryにまったく慣れていないので、いじくり回しています）。

一般的な考え方は、現在のサブメニューの左の位置と幅を取得し（最初に表示されていることを確認してから、もう一度非表示にするか、ユーザーがメニューをタップしたときに表示してシフトする）、その値がより大きいかどうかを確認することです。画面の幅。もしそうなら、それは違いによって左にシフトされるべきです。しかし、私の試みは要素に何もしていないようで、メニューは部分的に画面外に表示され続けます。現在、私はこれを持っています（体がロードされた後に実行されます）：

var menus = $('#navbar').find('.subMenu');
menus.show();
menus.each(function(index) {
  var offsetMenu = $(this).offset();
  var diff = screen.width - ($(this).outerWidth + offsetMenu.left);
  if(diff < 0) {
    $(this).offset({top:offsetMenu.top, left:offsetMenu + diff});
  }
  });
menus.hide();

jQueryのバージョンは1.7.2で、HTML構造は次のとおりです（簡略化されたバージョン）。

<div id="navbar">
  <ul>
    <li class="dropdown"><a href="#">Link A</a></li>
    <li class="dropdown"><a href="#">Link B</a>
      <ul class="subMenu">
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
      </ul>
    </li>
  </ul>
</div>

どうすればこれを機能させることができますか？

編集：関連するCSSもここにあります。

#navbar ul.subMenu {
    position:absolute;
    display:none;
    background-color:#FFAF1E;
}
#navbar ul.subMenu li {
    clear:both;
}
#navbar a {
    text-decoration:none;
    color:#0C1F6E;
    display:block;
    padding-right:10px;
    padding-left:10px;
}
4

3 に答える 3

2

私はついに次のものを動作させることができました：

function adjustSubMenus()
  {
      var menus = $('#navbar').find('.subMenu');
      menus.each(function(){
          $(this).css("left","");
          adjustSingleMenu($(this))
          } );
  }
  function adjustSingleMenu(element)
  {
      element.show();
      var thisMenuWidth = element.outerWidth();
      var thisMenuPos = element.offset();
      var diff = (thisMenuWidth + thisMenuPos.left) - window.outerWidth;
      if(diff > 0) {
          element.css("left", function() { return thisMenuPos.left - diff; });
      }
      element.hide();
  }
  $('body').ready(function() {
      $(window).resize(adjustSubMenus());
      if(window.outerWidth <= 720) {
          $('html').mousedown(function() {
              $('#navbar').find('.subMenu').each(function(index) { 
                if($(this).is(":visible") ) {
                    $(this).css("left","");
                    $(this).hide(); 
                    }
              } );
          });

          $('#navbar').mousedown(function(event) {
              event.stopPropagation();
          });

          $('.dropdown').mousedown(function() {
              var ele = $(this).find('.subMenu');
              $('#navbar').find('.subMenu').each(function(index) { 
                if(!$(this).is(ele) && $(this).is(":visible") ) {
                    $(this).css("left","");
                    $(this).hide(); 
                    }
              } );
              if(ele.is(":visible")) {
                  ele.css("left","");
                  ele.hide();
              }
              else {
                  adjustSingleMenu(ele);
                  ele.show();                 
              }
              });
      }
      else
      {
          $('.dropdown').hover(
              function() { $(this).find('.subMenu').stop(true,true).slideDown("fast"); },
              function() { $(this).find('.subMenu').stop(true,true).hide(); } 
          );
      }
  });

唯一の小さな注意点は、電話の向きを変更するときにメニューを開いていると、メニューが画面に表示されない場合があることです。メニューを閉じて再度開くと、この問題が修正されます。他のすべては完全に機能します。

于 2012-05-31T05:26:37.107 に答える
1

モバイル専用のCSS（CSSクラス名に関連付けられている）を作成してみて、狭い画面またはモバイルデバイスのいずれかが検出されたら、CSSクラスを要素に追加します。

Javascript：

if (is_mobile)
{
    $(".subMenu").addClass('mobile');
}

CSS：

/* CSS */
.mobile { width:100%; left:0 !important; position:absolute; }
于 2012-05-30T22:03:59.690 に答える
1

関数はサブメニューの幅とその左オフセットをチェックして、これが画面幅よりも大きい場合は、左の値を0に設定し、その幅を画面幅として設定する必要がありますか？

例えば

    var menus = $('#navbar').find('.subMenu'),
        screenWidth = $(window).width();
        //screenWidth = screen.width; //I assume this calculates the screens width properly
    menus.show();
    menus.each(function(index) {
      var thisMenu = $(this),
          thisMenuWidth = thisMenu.outerWidth(),
          thisMenuLeft = thisMenu.offset().left;
      if(screenWidth < (thisMenuWidth + thisMenuLeft)) {
        thisMenu
            .width(screenWidth)
            .css({ //could replace this with .addClass("yourClass") and add this styling to that "yourClass" instead
             "left": "0", 
             "position": "absolute"
            });
      }
      });
    menus.hide();

アップデート：

screen.widthは、モバイルデバイス用にすでに考案した特別な計算だと思いました。私は今この行を変更しました。上記は機能するはずです。メニューの幅は修正されませんが、すでに解決策があるようです。メニューが画面よりも広い場合、上記はその幅を修正します。

于 2012-05-30T22:12:08.677 に答える