サブメニューがホバリングにロードされていません

ul liの代わりにdivとして完全に作成されたメニューとサブメニューがあります。だから、メニュー要素をホバリングすると、特定のdivをターゲットにしてサブメニューとして表示する必要があります。私はサブメニューとして表示する特定のdivをターゲットにするデータターゲットとしてサブメニューIDを渡すことによってjqueryイベントを書いています。ブレークポイントを適用すると、ループは内部に入りますが、サブメニューの初期プロパティ（display：none）を（display：ブロック）に削除できません。 Here is the plunker link for more details。私が間違っているところを教えてください。サブメニューがホバリングにロードされていません

このdivアプローチは正しくはありません。しかし、私は、既存のHTMLに

$("#mainDiv div").hover(function() { 
    var menuliID = this.id; // id of clicked li by directly accessing DOMElement property 
    console.log(liID); 
    var subMenuId = jQuery(this).attr('data-target'); // jQuery's .attr() method 
    console.log(subMenuId); 
    jQuery('#' + menuliID).hover(function(){ 
     console.log("entered inside function"); 
     $('#' + subMenuId).css('display', 'block !important'); 
     console.log('"#' + subMenuId + '"'); 
    }, 
    function() { 
     console.log("entered inside 2nd function") 
     jQuery('#' + subMenuId).css('display', 'none'); 

    } 
    ); 

} 
);

出典

2017-10-05 shabarinath

に従ってを開発する必要があり、あなたが.show()たりして作業を行うことができますよう.css()を適用する必要はありませんよう

$('#' + subMenuId).show();

に

$('#' + subMenuId).css('display', 'block !important');

を変更してください.hide()

と私の仕事をご覧くださいグラムスニペット

// Code goes here 
 

 
$("#mainDiv > .menuli").hover(function() { 
 
     var menuliID = this.id; // id of clicked li by directly accessing DOMElement property 
 
     console.log(menuliID); 
 
     var subMenuId = jQuery(this).attr('data-target'); // jQuery's .attr() method 
 
     console.log(subMenuId); 
 
     if($('#' + subMenuId).is(":visible")){ 
 
      $('#' + subMenuId).hide(); 
 
     }else{ 
 
      $('#' + subMenuId).show(); 
 
     } 
 
    } 
 
    );

/* Styles go here */ 
 
#mainDiv div{ 
 
    border:1px solid; 
 
    width:30%; 
 
} 
 
.submenu{ 
 
    position:absolute; 
 
    top:0; 
 
    left:24%; 
 
} 
 
.submenu ul li{ 
 
    border:1px solid; 
 
    list-style:none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!DOCTYPE html> 
 
<html> 
 

 
    <head> 
 
    <script data-require="[email protected]*" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
    <link rel="stylesheet" href="style.css" /> 
 
    <script src="script.js"></script> 
 
    </head> 
 

 
    <body> 
 
    <div id="mainDiv"> 
 
     <div id="menu1" class="menuli" data-target="submenu1">Menu1</div> 
 
     <div id="menu2" class="menuli" data-target="submenu2">Menu2</div> 
 
     <div id="menu3" class="menuli" data-target="submenu3">Menu3</div> 
 
    </div> 
 
    <div id="submenu1" class="submenu" style="display:none;"> 
 
     <ul> 
 
     <li>Subelement1</li> 
 
     <li>Subelement2</li> 
 
     <li>Subelement3</li> 
 
     </ul> 
 
    </div> 
 
    <div id="submenu2" class="submenu" style="display:none;"> 
 
     <ul> 
 
     <li>Subelement4</li> 
 
     <li>Subelement2</li> 
 
     <li>Subelement3</li> 
 
     </ul> 
 
    </div> 
 
    <div id="submenu3" class="submenu" style="display:none;"> 
 
     <ul> 
 
     <li>Subelement5</li> 
 
     <li>Subelement2</li> 
 
     <li>Subelement3</li> 
 
     </ul> 
 
    </div> 
 
    </body> 
 

 
</html>

出典

2017-10-05 07:30:56 Pritamkumar

うわー。これは役に立ちます。カーソルが既にdiv要素に入ったら、再度ホバーをチェックする必要はありません。なぜ私はそれを考えなかったのですか？ – shabarinath

私の答えがあなたの問題を解決すれば私の答えをチェックしてください@ shabarinath – Pritamkumar

次のようにコードを簡素化することができます。メインメニューの上にマウスを移動するとサブメニューの表示がtoggleに変わります。

私はサブメニューにhoverイベントを添付してマウスオーバーで表示されています。

//Toggle display of submenu when hover on main menu 
 
$("#mainDiv div").hover(function() { 
 
    $('#' + $(this).attr('data-target')).toggle(); 
 
}); 
 

 
//Display submenu when hover on it 
 
$(".submenu").hover(function(){ 
 
     $(this).show(); 
 
}, function(){ 
 
     $(this).hide(); 
 
})

.submenu { 
 
    border: 1px solid transparent; 
 
} 
 
.menuli{ 
 
    padding-left: 10px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="mainDiv" style="display:inline-flex;padding-top:10px;"> 
 
\t <div id="menu1" class="menuli" data-target="submenu1">Menu1</div> 
 
\t <div id="menu2" class="menuli" data-target="submenu2">Menu2</div> 
 
\t <div id="menu3" class="menuli" data-target="submenu3">Menu3</div> 
 
</div> 
 

 
<div id="submenu1" class="submenu" style="display:none;"> 
 
\t <ul> 
 
\t \t <li>Subelement1</li> 
 
\t \t <li>Subelement2</li> 
 
\t \t <li>Subelement3</li> 
 
\t </ul> 
 
</div> 
 

 
<div id="submenu2" class="submenu" style="display:none;"> 
 
\t <ul> 
 
\t \t <li>Subelement4</li> 
 
\t \t <li>Subelement2</li> 
 
\t \t <li>Subelement3</li> 
 
\t </ul> 
 
</div> 
 

 
<div id="submenu3" class="submenu" style="display:none;"> 
 
\t <ul> 
 
\t \t <li>Subelement5</li> 
 
\t \t <li>Subelement2</li> 
 
\t \t <li>Subelement3</li> 
 
\t </ul> 
 
</div>

出典

2017-10-05 07:35:17

ありがとう。あなたのアイデアは、ホバーオーバーサブメニューを保持するのに役立ちました。 – shabarinath

サブメニューがホバリングにロードされていません

答えて

関連する問題