我希望當第一個元素向下擴展并且第一個元素的所有子元素向右擴展時。我做了什么：
$(document).ready(function() {
$('.information_menu_root_ul').menu({
position: {
my: 'left top',
at: 'left bottom 2'
}
});
});.information_menu_item {
width: 300px;
}
.information_menu_root_ul .ui-menu .ui-menu {
left: 100% !important;
top: 0px !important;
box-sizing: border-box;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script>
<div class="information_menu_item">Header(for hover)
<ul class="information_menu_root_ul">
<li>
<div class="information_menu_item">Item 1</div>
<ul>
<li>
<div class="information_menu_item">Item 2</div>
<ul>
<li>
<div class="information_menu_item">Item 3</div>
<ul>
<li>
<div class="information_menu_item">Item 4</div>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>除了一件事，它作業正常。當到達右邊框時，沒有發生默認翻轉。這是因為左/上覆寫，我明白了。但是可能有一些我沒有看到的選單技巧或引數？
默認行為，比較：
$(document).ready(function() {
$('.information_menu_root_ul').menu();
});.information_menu_item {
width: 200px;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script>
<div class="information_menu_item">Header(for hover)
<ul class="information_menu_root_ul">
<li>
<div class="information_menu_item">Item 1</div>
<ul>
<li>
<div class="information_menu_item">Item 2</div>
<ul>
<li>
<div class="information_menu_item">Item 3</div>
<ul>
<li>
<div class="information_menu_item">Item 4</div>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
uj5u.com熱心網友回復：
請查看此示例。
$(function() {
$('.information_menu_root_ul').menu({
position: {
my: 'right top',
at: 'left bottom 2'
}
});
});.ui-menu {
width: 300px;
}<link rel="stylesheet" href="//code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script>
<div class="information_menu_item_wrapper">Header(for hover)
<ul class="information_menu_root_ul">
<li>
<div class="information_menu_item">Item 1</div>
<ul>
<li>
<div class="information_menu_item">Item 2</div>
<ul>
<li>
<div class="information_menu_item">Item 3</div>
<ul>
<li>
<div class="information_menu_item">Item 4</div>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>在flip適當似乎作業和螢屏上的“選項3”出現“第2項”下，翻轉到另一側。
我不確定為什么你有額外的 CSS，所以我測驗了沒有它。如果這不是您想要的，請說明您要達到的目標。視覺示例也可能有所幫助。
更新
您可能需要嵌套選單。
$(function() {
$("#menu-top").menu().mouseover(function() {
$("#menu-drop").show();
});
$("#menu-drop").menu({
position: {
my: "left top",
at: "left bottom 2"
},
select: function() {
$(this).hide();
}
}).position({
my: "left top",
at: "right top",
of: $("#menu-top")
}).hide();
});.ui-menu {
width: 300px;
}
#menu-top.ui-menu .hidden {
display: none;
}<link rel="stylesheet" href="//code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script>
<ul id="menu-top">
<li class="top-item">
<div>Item 1</div>
<ul class="hidden">
</ul>
</li>
</ul>
<ul id="menu-drop">
<li>
<div>Item 2</div>
<ul>
<li>
<div>Item 3</div>
<ul>
<li>
<div>Item 4</div>
</li>
</ul>
</li>
</ul>
</li>
</ul>Same Fiddle: https://jsfiddle.net/Twisty/xsdr1La3/46/
This creates a pseudo menu that is positioned to be the Sub-Menu. I found this: How to make jQuery UI nav menu horizontal? and that helped.
Looking at your image, I am not sure I hit on what you want.
uj5u.com熱心網友回復：
我已經設法做到了，我想要的，花費比想象的少）不涉及所有孩子的想法讓選單自己處理它，而是糾正第一個孩子的行為。
$(document).ready(function() {
$('.information_menu_root_ul').menu();
$('.information_menu_root_ul > li > .ui-menu').addClass('information_menu_first_child');
});.information_menu_root_ul {
display: none;
position: relative;
background-color: #c7e6b3 !important;
}
.information_menu_item {
width: 300px;
}
.information_menu_first_child {
position: absolute;
top: 101% !important;
left: 0px !important;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script>
<div class="information_menu_item">Header(for hover)
<ul class="information_menu_root_ul">
<li>
<div class="information_menu_item">Item 1</div>
<ul>
<li>
<div class="information_menu_item">Item 2</div>
<ul>
<li>
<div class="information_menu_item">Item 3</div>
<ul>
<li>
<div class="information_menu_item">Item 4</div>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>And "information_menu_first_child" class "left and top" attributes allow you to fine tune position for your needs.
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/359213.html