子菜單沒有加載懸停

我有菜單和子菜單是完全創建爲divs而不是ul li。因此，在懸停菜單元素時，我需要定位特定的div並顯示爲子菜單。我寫了一個jquery事件，通過傳遞子菜單id作爲數據目標來定位特定的div來顯示爲子菜單。當我應用中斷點時，循環進入內部，但無法刪除子菜單的初始屬性（display：none）爲（display：block）。 Here is the plunker link for more details。請讓我知道我哪裏錯了。子菜單沒有加載懸停

我明白這種方法是不對的。但是，我要發展，根據現有的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

請更改

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

到

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

，因爲它是沒有必要申請.css()，你可以用.show()或做你的工作.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

子菜單沒有加載懸停

回答

相關問題