12

まず、私はこの投稿を認識しています: Activating
bootstrap dropdown menu on hover
Bootstrap Dropdown with Hover
How to make twitter bootstrap menu dropdown on hover rather than click
.
最初に、angular-bootstrap ドロップダウン ディレクティブの is-open 属性を次のように使用しました。

<span class="dropdown" dropdown is-open="status.isopen">
  <a
    href
    class="dropdown-toggle"
    ng-mouseenter="status.isopen = true"
    ng-mouseleave="status.isopen = false"
  >
    hover me for a dropdown with angular-bootstrap
  </a>
  <ul
    class="dropdown-menu"
  >
    <li ng-repeat="choice in items">
      <a href>{{choice}}</a>
    </li>
  </ul>
</span>

それはうまくいくように見えましたが、2つのバグが現れました:

  • 1 つ目は、dropdown-toggle 要素がクリックされたとき、ドロップダウン メニューが表示されなくなり、もう一度クリックしても元に戻りません。ドロップダウン メニューを元に戻すには、マウスを離してからドロップダウン トグルにマウスを入力する必要があります。
  • 2 つ目は css/html の問題です。

通常、ドロップダウンの通常の css ソリューションは次のようになります。

<a class="css-dropdown">
  hover here with css.
  <div class="css-dropdown-menu">
    <p>item 1</p>
    <p>item 2</p>
    <p>item 3</p>
  </div>
</a>

ドロップダウン メニューがドロップダウン トグル要素内にあることに注意してください。これは、ドロップダウン トグルからドロップダウン メニューにマウスで移動すると、親から子に移動することを意味します。その子では、ドロップダウンメニューは引き続き表示されます。一方、ブートストラップドロップダウンはクリックイベントで機能するため、ドロップダウンメニューをドロップダウントグルの子として持つ必要はありませんが、誰かが望むときにマウスがドロップダウンから離れたら、動作を mouseenter/hover に変更します-トグル ドロップダウン メニューが消えるため、ドロップダウン メニュー要素にアクセスできなくなります。これは、このプランカーに表示されます

最初のバグを修正するために、ドロップダウン ディレクティブを削除してから、 is-open を次のように ng-class ディレクティブに置き換えました。
これを変える：

<span class="dropdown" dropdown is-open="status.isopen">

これに：

<span class="dropdown" ng-class="{'open': status.isopen}">

残りは、最初のバグを修正したプランカーのままです。
2 番目のバグはトリッキーです。ドロップダウン メニューがドロップダウン トグルの子ではなくなったため、トグルからメニューに移動している間はホバー効果が持続しないため、これを行いました。これを変更しました：

<ul class="dropdown-menu">

これに：

<ul
  class="dropdown-menu"
  ng-mouseenter="status.isopen = true"
  ng-mouseleave="status.isopen = false"
>

それはできましたが、開いたままのドロップダウンメニュー項目をクリックすると別のバグが発生したため、これを実行してハッキングを続けました。これを変更しました：

<li ng-repeat="choice in items">

これに：

<li ng-repeat="choice in items" ng-click="status.isopen = false">

それは私に必要な動作plunkerを与えます。
とはいえ、単純な視覚効果のために多くのディレクティブがここに含まれているため、これは良い解決策ではありません。私が提供した最後のプランカーには、Bootstrap や AngularJS が含まれていない CSS ソリューションが含まれていますが、これは必須の動作ですが、必須ではありません。 html構造または視覚的な結果、必要なのは、トグル要素のパディングではなく、ドロップダウントグルとドロップダウンメニューの間にスペースを空けることです。これにより、この状況ではcssソリューションが無効になります。
それで、私の質問は、新しいプラグイン/ライブラリを追加せずに、ホバードロップダウンメニュー用のよりクリーンで簡単に再利用可能なソリューションを追加するより良い方法はありますか?

4

4 に答える 4

5

最初に、最上位の親要素(この場合は<span>)を切り替えます。

<span class="btn-group" dropdown is-open="status.isopen" ng-mouseenter="status.isopen = true" ng-mouseleave="status.isopen = false">
  <a class="btn btn-primary dropdown-toggle" dropdown-toggle>
    Button dropdown <span class="caret"></span>
  </a>
  <ul class="dropdown-menu" role="menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</span>

これにより、必要な動作が可能になります-クリックしてメニューを表示/非表示にすることができます;-)

ただし、厄介な点があります。マウス カーソルをゆっくり動かして、トグルとメニューの間の小さな隙間を通過すると、メニューが隠れてしまいます。

次に、小さなCSSを追加してギャップを取り除きます

.dropdown-menu {
    margin-top: 0;
}

このplunkerのアクションを参照してください。

于 2015-07-15T09:20:40.173 に答える