drop-down-menu 相关问题

社区您好，我需要您的帮助，请提供一个 Excel 解决方案，用于更改对另一张工作表的引用的公式

我知道提出了类似的问题并找到了解决方案，但我相信我的情况有点不同。老实说，我决定加入这个特定社区的原因是我发现......

为什么我的下拉菜单无法正常显示

我正在尝试为我的项目获取下拉菜单，但菜单未显示。 这是 HTML @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap'); * { ...

角度导航项：第一次单击导航到页面并打开下拉菜单？

我有 Angular 导航项组件： {{文字}} 导入 { 组件，输入 }

为什么我的下拉菜单只出现一半？

我正在创建谷歌网页的副本。我已完成所有操作，但应用程序图标的下拉菜单仅显示一半。我已经尝试过增加高度等。我认为这不是……

下拉列表项的工具提示

我有一个下拉列表，我想为下拉列表项添加工具提示。 我尝试使用以下代码，但它不起作用； 对于 (int d = 0; d < drpID.Items.Count; d++) { drpID.It...

下拉选择组件有数据落后一步

我的应用程序中有一个下拉菜单。当它被选择时，它会触发一个更改 sortOption 状态的方法，然后触发 useEffect 对数据进行排序（称为 allTabs）。然而，数据...

n 不是 bs4.5.2 下拉菜单和 jquery 3.5.1 的构造函数错误

在index.html中，我包含了这些 <p>在index.html中，我包含了这些</p> <pre><code> &lt;script src=&#34;https://code.jquery.com/jquery-3.5.1.slim.min.js&#34;&gt;&lt;/script&gt; &lt;script src=&#34;https://cdn.jsdelivr.net/npm/@popperjs/<a href="/cdn-cgi/l/email-protection" data-cfemail="492a263b2c097b6770677a">[email protected]</a>/dist/umd/popper.min.js&#34;&gt;&lt;/script&gt; &lt;script src=&#34;https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js&#34;&gt;&lt;/script&gt; </code></pre> <p>导致错误的代码是以下前进按钮：</p> <pre><code>&lt;div className=&#34;btn-group float-right&#34; role=&#34;group&#34; aria-label=&#34;Button group&#34;&gt; &lt;div className=&#34;dropdown&#34;&gt; &lt;button className=&#34;btn btn-success dropdown-toggle&#34; type=&#34;button&#34; id={`forwardDropdown-${issue.issueId}`} data-toggle=&#34;dropdown&#34; aria-haspopup=&#34;true&#34; aria-expanded=&#34;false&#34;&gt; Forward &lt;/button&gt; &lt;div className=&#34;dropdown-menu&#34; aria-labelledby={`forwardDropdown-${issue.issueId}`}&gt; &lt;a className=&#34;dropdown-item&#34; href=&#34;#&#34;&gt;Action&lt;/a&gt; &lt;a className=&#34;dropdown-item&#34; href=&#34;#&#34;&gt;Another action&lt;/a&gt; &lt;a className=&#34;dropdown-item&#34; href=&#34;#&#34;&gt;Something else here&lt;/a&gt; &lt;/div&gt; &lt;/div&gt; &lt;button type=&#39;button&#39; className=&#34;btn btn-danger&#34;&gt;Discard&lt;/button&gt; &lt;/div&gt; </code></pre> <p>我得到的错误是</p> <pre><code>Uncaught TypeError: n is not a constructor at i.show (dropdown.js:175:22) at i.toggle (dropdown.js:126:10) at HTMLButtonElement.&lt;anonymous&gt; (dropdown.js:363:14) at Function.each (jquery-3.5.1.slim.min.js:2:3182) at E.fn.init.each (jquery-3.5.1.slim.min.js:2:1660) at t._jQueryInterface [as dropdown] (dropdown.js:350:17) at HTMLButtonElement.&lt;anonymous&gt; (dropdown.js:515:31) at HTMLDocument.dispatch (jquery-3.5.1.slim.min.js:2:42868) at v.handle (jquery-3.5.1.slim.min.js:2:40852) </code></pre> <p>react在屏幕上显示的错误如下</p> <pre><code>Script error. at handleError (http://localhost:3000/static/js/bundle.js:50096:58) at http://localhost:3000/static/js/bundle.js:50115:7 </code></pre> </question> <answer tick="false" vote="0"> <p>我也有同样的问题，最初我在我的基本模板中使用这些版本</p> <pre><code>&lt;script src=&#34;https://cdn.jsdelivr.net/npm/@popperjs/<a href="/cdn-cgi/l/email-protection" data-cfemail="c1a2aeb3a481f3eff8eff2">[email protected]</a>/dist/umd/popper.min.js&#34;&gt;&lt;/script&gt; &lt;script src=&#34;https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js&#34;&gt;&lt;/script&gt;``` When I changed to these versions below, my bootstrap dropdown started working properly. ```&lt;script src=&#34;https://code.jquery.com/jquery-3.5.1.slim.min.js&#34; integrity=&#34;sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj&#34; crossorigin=&#34;anonymous&#34;&gt;&lt;/script&gt; &lt;script src=&#34;https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" data-cfemail="68180718180d1a46021b285946595e4659">[email protected]</a>/dist/umd/popper.min.js&#34; integrity=&#34;sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN&#34; crossorigin=&#34;anonymous&#34;&gt;&lt;/script&gt; &lt;script src=&#34;https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" data-cfemail="0b6964647f787f796a7b4b3f253e2538">[email protected]</a>/dist/js/bootstrap.min.js&#34; integrity=&#34;sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s&#34; crossorigin=&#34;anonymous&#34;&gt;&lt;/script&gt;``` I was compatibility issue, you can refer for the links here: `https://getbootstrap.com/docs/4.5/getting-started/introduction/` </code></pre> </answer> </body></html>

设置 DataGridView ComboBoxColumn 的下拉列表宽度 - WinForms

我有一个带有组合框列的数据网格视图。此列是数据绑定的。我想根据列表中最大项目的宽度设置下拉列表的宽度。对于普通的组合框来说......

MUI 选择下拉菜单变得不可见，但不会消失或失去焦点

我正在使用 MUI Select，代码如下： {元素标签} 我正在使用 MUI Select，代码如下： <FormControl required fullWidth size="small"> <InputLabel id={`${elementName}-label`}>{elementLabel}</InputLabel> <Select labelId={`${elementName}-label`} id={`${elementName}`} name={`${elementName}`} value={elementValue} label={elementLabel} onChange={(e) => changeHandler(e, setForm)} > {elementArrayOptions.map(option => <MenuItem value={option} key={option}>{option}</MenuItem>)} </Select> </FormControl> 这是changeHandler的代码： const handleResultsSelect = (e, setForm) => { setForm(e.target.value) } 问题是“选择”在使用前三四次时可以工作，但在第四次左右时，下拉菜单变得不可见，但下拉菜单并没有消失 - 每当我将鼠标悬停在放置菜单所在的位置，当我单击时，将选择新项目，并且视图会更新。最大的不便之处在于，发生这种情况时，没有按钮、复选标记或任何其他输入可单击，这意味着视图基本上冻结，并且下拉菜单保持不可见，但无限期地向下。 这个问题有解决办法吗？ 我通过添加一个布尔状态变量来解决这个问题，该变量确定菜单是否应该显示： const [openResultsMenu, setOpenResultsMenu] = useState(false) <FormControl required fullWidth size="small"> <InputLabel id={`${elementName}-label`}>{elementLabel}</InputLabel> <Select labelId={`${elementName}-label`} id={`${elementName}`} name={`${elementName}`} value={elementValue} label={elementLabel} onClick={() => setOpenResultsMenu(true)} onChange={(e) => changeHandler(e, setForm)} MenuProps={{ open: openResultsMenu }} > {elementArrayOptions.map(option => <MenuItem value={option} key={option}>{option}</MenuItem>)} </Select> </FormControl> const handleResultsSelect = (e, setForm) => { setForm(e.target.value) } useEffect(() => { setOpenResultsMenu(false) }, [resultsName]) 如果其他人能找到一种不那么老套的方法，我会喜欢这种方法，但这绝对有效。 我终于明白为什么这件事发生在我身上了。 我的情况的根本原因是存在无限循环，导致 JS 堆膨胀。 这个循环的副作用是像关闭 MUI 选择元素这样的 js 操作会被排队并在长时间延迟后执行。 我定位无限循环的方法是使用chrome中的性能开发工具。 我重现了不可见的下拉列表，然后记录了大约 30-60 秒的应用程序性能。这就是图表的样子。 我的应用程序性能的屏幕截图。

CSS - 下拉菜单定位

下拉菜单溢出屏幕（宽度方向），修复后我想知道如何更好地控制它的位置以及如何使其位置不相对。 ..

有没有办法确定<select>下拉菜单是否打开？

我正在寻找一种方法来确定 元素的菜单是否/何时打开。我不需要强制它打开或关闭，只需弄清楚它在给定时间是打开还是关闭即可。 我可以听 我正在寻找一种方法来确定 <select> 元素的菜单是否/何时打开。我不需要强制它打开或关闭，只需弄清楚它在给定时间是打开还是关闭即可。 我可以监听焦点/模糊、鼠标向上/鼠标向下等事件，但我认为我无法可靠地从这些事件中找出菜单的状态。例如，mousedown 后跟 mouseup 可能意味着用户单击并拖动到某个选择并释放（在这种情况下，菜单现在关闭）或单击并释放以打开菜单（在这种情况下，菜单打开）。下拉菜单的具体行为似乎也可能取决于浏览器。 我知道如果我滚动自己的下拉菜单就可以做到这一点，但我更喜欢使用 <select>。 有没有可靠的方法来确定下拉菜单是否打开？或者这是 Javascript 无法知道的东西？ 结论：似乎没有任何有保证的方法来确定选择菜单是否打开，无论是通过询问对象还是通过侦听它触发的事件。 对于我自己的使用，我只是使用 onfocus 和 onblur 来跟踪选择是否具有焦点。我假设没有焦点就无法打开菜单，这在我测试过的所有浏览器中似乎都是如此。它实际上并没有告诉我菜单何时打开，但它告诉我何时不能打开，这对于我的目的来说已经足够了。 您可以在 select 的 mouseenter 子元素中使用 option 事件，因为只有在选择菜单打开时才能进入其中，或者也可以在 click 元素上使用 select 事件，通常在打开它时抛出. 要在精确的时刻测试它是否打开我认为是不可能的。 在 Internet Explorer 中选择元素是出了名的棘手。我认为没有任何方法可以可靠地确定一个是打开还是关闭。 我可以查看选择是否打开，然后当用户选择新选项或完全模糊选择时关闭。但是，如果您单击相同的选项，或者仅单击一次选择（关闭它但不模糊它），它仍然显示“向下”。致力于制定更完整的解决方案。所以，期待这个答案有编辑...... <script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script> <script type="text/javascript"> var selected $( document ).ready( function() { $( '#test' ) .mousedown( function(){ console.log( 'down' ); selected = $( this ).val() } ) .blur( function(){ console.log( 'out' ) } ) .change( function(){ console.log( 'out' ) } ) .mouseleave( function(){ console.log( 'out' ) } ) .mouseup( function(){ if( $( this ).val() == selected ) console.log( 'out' ) } ) } // function ) // ready </script> <select id="test"> <option>1</option> <option>2</option> </select> 编辑：添加鼠标悬停 Edit2：添加了 mouseup - 现在可以使用！ 这是您问题的完整答案。是的，它有点长，但它在所有场景中都具有魅力。 当用户在我的实验中快速选择一个选项时，上面使用 onClick 的答案不起作用，所以我为什么不给出完整的答案 function App() { const [isOpen, setIsOpen] = useState(false); const componentRef = useRef(null); const selectClickHandle = (event) => { if (componentRef.current) { const rect = componentRef.current.getBoundingClientRect(); const { clientX, clientY } = event; const isInComponent = clientX >= rect.left && clientX <= rect.right && clientY >= rect.top && clientY <= rect.bottom; console.log(isInComponent); if (isInComponent == false) { setIsOpen(false); } } } const selectBlurHandle = () => { console.log("blur"); setIsOpen(false); } const selectkeyHandle = (event) => { console.log("key"); if (event.key === 'Enter' || event.keyCode === 13 || event.key === ' ' || event.keyCode === 32) { setIsOpen(true); } }; const selectMousePress = (event) => { console.log("mouse"); setIsOpen(!isOpen); } return ( <div className="App"> <h1 style={{ paddingTop: "200px" }}>currently closed {isOpen ? "true" : "false"}</h1> <div id="outer-container" > <select id="fruit" name="fruit" ref={componentRef} onMouseDown={selectMousePress} onClick={selectClickHandle} onBlur={selectBlurHandle} onKeyDown={selectkeyHandle} > <option value="apple" >Apple</option> <option value="banana">Banana</option> <option value="grape">Grape</option> </select> {/* <div className='hidden-copy' > {isOpen && options.map((item, idx) => ( <p key={idx} style={{ fontSize: "0.95rem" }}>copy</p> ))} </div> </div> */} </div> ); } export default App; 我还在媒体上写了一篇关于它的文章，如果需要更多说明，请访问。 https://medium.com/@ijlal.tanveer294/how-to-know-if-a-select-dropdown-is-open-555a304e7dda 更完整的解决方案是： <script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script> <script type="text/javascript"> var selected,selected2 $( document ).ready( function() { $( 'select[id$="test"]' ) .mousedown( function(){ console.log( 'predown' ); if( $( this ).val() != selected ) { console.log( 'down' ); selected = $( this ).val(); selected2=null;} else selected=null;} ) .blur( function(){ if (selected2==selected) { console.log( 'outb' ); selected=null; selected2=null;} } ) .mouseup( function(){ console.log( 'preoutu' ); if( $( this ).val() != selected || $( this ).val() == selected2 ) { console.log( 'outu' ); selected=null; selected2=null; } else selected2=$( this ).val(); } ) } // function ) // ready </script> <select id="1test"> <option>1</option> <option>2</option> </select> <select id="2test"> <option>1</option> <option>2</option> </select>

Bootstrap 5 下拉菜单无法切换回来自定义管理仪表板&...</desc> <question vote="1"> <pre><code><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Custom Admin Dashboard</title> <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"> <script src="bootstrap/js/bootstrap.min.js"></script> </head> <body> <div class="dropdown dropdown-center"> <button class="btn btn-outline dropdown-toggle rounded-3" type="button" data-bs-toggle="dropdown" aria-expanded="false"> Order Status </button> <ul class="dropdown-menu"> <li><a class="dropdown-item active" href="#">In Stock</a></li> <li><a class="dropdown-item" href="#">Cancelled</a></li> <li><a class="dropdown-item" href="#">Delivered</a></li> <li><a class="dropdown-item" href="#">Progress</a></li> </ul> </div> <script src="https://unpkg.com/@popperjs/core@2"></script> <script src="bootstrap/js/bootstrap.min.js"></script> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script> </body> </code></pre> <p>我的 Bootstrap 5 下拉列表没有折叠回来，我尝试了很多但找不到解决方案</p> </question> <answer tick="false" vote="0"> <p>您加载 Bootstrap 脚本两次，这导致了冲突。</p> <p>删除一个脚本标签：</p> <pre><code><head> <!-- remove this --> <!--<script src="bootstrap/js/bootstrap.min.js"></script>--> </head> <body> <script src="bootstrap/js/bootstrap.min.js"></script> </body> </code></pre> </answer> </body></html>

自定义管理仪表板&...</desc> <question vote="1"> <pre><code><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Custom Admin Dashboard</title> <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"> <script src="bootstrap/js/bootstrap.min.js"></script> </head> <body> <div class="dropdown dropdown-center"> <button class="btn btn-outline dropdown-toggle rounded-3" type="button" data-bs-toggle="dropdown" aria-expanded="false"> Order Status </button> <ul class="dropdown-menu"> <li><a class="dropdown-item active" href="#">In Stock</a></li> <li><a class="dropdown-item" href="#">Cancelled</a></li> <li><a class="dropdown-item" href="#">Delivered</a></li> <li><a class="dropdown-item" href="#">Progress</a></li> </ul> </div> <script src="https://unpkg.com/@popperjs/core@2"></script> <script src="bootstrap/js/bootstrap.min.js"></script> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script> </body> </code></pre> <p>我的 Bootstrap 5 下拉列表没有折叠回来，我尝试了很多但找不到解决方案</p> </question> <answer tick="false" vote="0"> <p>您加载 Bootstrap 脚本两次，这导致了冲突。</p> <p>删除一个脚本标签：</p> <pre><code><head> <!-- remove this --> <!--<script src="bootstrap/js/bootstrap.min.js"></script>--> </head> <body> <script src="bootstrap/js/bootstrap.min.js"></script> </body> </code></pre> </answer> </body></html>

选择多个禁用不显示在移动设备中

我有一个： 选择1 选择2 选择3 在桌面上（

如何在 html 下拉列表中显示类别名称？

我的表单中有一个下拉列表。有很多项目。我想在下拉列表中显示类别名称，用户可以看到但无法选择。 到目前为止我有这个。 ...

使用plotly绘制多个pandas列，并通过下拉菜单选择列

我有以下 pandas 数据框，我尝试使用 Plotly 绘制条形图，并通过下拉菜单通过股票名称列进行选择，参考此答案。 但我不确定如何添加

从报告中提取记录并在下拉菜单中显示它们

我被要求使用我想要实现的目标的示例电子表格再次打开这个问题。 这是：锻炼 我已经在练习表中使用了 SUMIF 和 COUNTIF，因为我没有...

如何用php预选html下拉列表？ [重复]

我正在尝试使用 PHP 选择选项，但我没有主意了！ 下面是我到目前为止尝试过的代码： 是的 我正在尝试使用 PHP 选择选项，但我没有主意了！ 下面是我到目前为止尝试过的代码： <select> <option value="1">Yes</options> <option value="2">No</options> <option value="3">Fine</options> </select> <input type="text" value="" name="name"> <input type="submit" value="go" name="go"> 那么，我该怎么办？ 程序员很懒……呃……高效……我会这样做： <?php // This part of the code should be outside of your view e.g. in a Controller or so. $options = [ 1 => 'Yes', 2 => 'No', 3 => 'Fine', ]; $selected = 1; ?> <!-- And this part would be in your View --> <select> <?php foreach ($options as $key => $text) { ?> <option value="<?= $key ?>" <?= $key === $selected ? 'selected' : '' ?>><?= $text ?></option> <?php } ?> </select> <input type="text" name="name"/> <input type="submit" value="Go"/> <select> <option value="1" <?php if ($myVar==1) echo 'selected="selected"';?>>Yes</options> <option value="2" <?php if ($myVar==2) echo 'selected="selected"';?>>No</options> <option value="3" <?php if ($myVar==3) echo 'selected="selected"';?>>Fine</options> </select> <input type="text" value="" name="name"> <input type="submit" value="go" name="go"> 如果我正确理解你的问题，这是一种非常简单直接的方法。 你可以用这个.. <select name="select_name"> <option value="1"<?php echo(isset($_POST['select_name'])&&($_POST['select_name']=='1')?' selected="selected"':'');?>>Yes</option> <option value="2"<?php echo(isset($_POST['select_name'])&&($_POST['select_name']=='2')?' selected="selected"':'');?>>No</option> <option value="3"<?php echo(isset($_POST['select_name'])&&($_POST['select_name']=='3')?' selected="selected"':'');?>>Fine</option> </select> 首先为您的选择命名。然后做： <select name="my_select"> <option value="1" <?= ($_POST['my_select'] == "1")? "selected":"";?>>Yes</options> <option value="2" <?= ($_POST['my_select'] == "2")? "selected":"";?>>No</options> <option value="3" <?= ($_POST['my_select'] == "3")? "selected":"";?>>Fine</options> </select> 它的作用是检查每个选择的内容是否相同，以及何时发现回显“已选择”。 我想您正在使用数组来创建 select 表单输入。 在这种情况下，请使用数组： <?php $selected = array( $_REQUEST['yesnofine'] => 'selected="selected"' ); $fields = array(1 => 'Yes', 2 => 'No', 3 => 'Fine'); ?> <select name=‘yesnofine'> <?php foreach ($fields as $k => $v): ?> <option value="<?php echo $k;?>" <?php @print($selected[$k]);?>><?php echo $v;?></options> <?php endforeach; ?> </select> 如果没有，您可以展开上面的循环，并仍然使用数组。 <option value="1" <?php @print($selected[$k]);?>>Yes</options> <option value="2" <?php @print($selected[$k]);?>>No</options> <option value="3" <?php @print($selected[$k]);?>>Fine</options> 注意到我不知道： 你如何命名你的输入，所以我为它起了一个名字。 您在服务器端处理表单输入的方式，我使用了$_REQUEST， 您必须调整代码以匹配您正在使用的框架的要求（如果有）。 此外，在许多框架中习惯于在视图专用脚本中使用替代语法。 我使用内联 if ($_POST['category'] == $data['id'] ? 'selected="selected"' : false) 我有 2 个 php 文件，我做了这个，它可以工作。 （这是一个示例）第一个代码来自一个文件，第二个代码来自两个文件。 <form action="two.php" method="post"> <input type="submit" class="button" value="submit" name="one"/> <select name="numbers"> <option value="1"> 1 </option> <option value="2"> 2 </option> <option value="3"> 3 </option> </select> </form> if(isset ($_POST['one'])) { if($_POST['numbers']=='1') { $a='1' ; } else if($_POST['numbers']=='2') { $a='2' ; { else if ($_POST['numbers']=='3') { $a='3' ; } } 此答案与特定接收者无关，但可能对其他人有用。 我在通过数据库返回的值“选择”正确的“选项”时遇到了类似的问题。 我通过添加带有应用显示的附加标签解决了这个问题：无。 <?php $status = "NOT_ON_LIST"; $text = "<html> <head> </head> <body> <select id=\"statuses\"> <option value=\"status\" selected=\"selected\" style=\"display:none\">$status</option> <option value=\"status\">OK</option> <option value=\"status\">DOWN</option> <option value=\"status\">UNKNOWN</option> </select> </body> </html>"; print $text; ?> 这是我想出的解决方案： <form name = "form1" id = "form1" action = "#" method = "post"> <select name = "DropDownList1" id = "DropDownList1"> <?php $arr = array('Yes', 'No', 'Fine' ); // create array so looping is easier for( $i = 1; $i <= 3; $i++ ) // loop starts at first value and ends at last value { $selected = ''; // keep selected at nothing if( isset( $_POST['go'] ) ) // check if form was submitted { if( $_POST['DropDownList1'] == $i ) // if the value of the dropdownlist is equal to the looped variable { $selected = 'selected = "selected"'; // if is equal, set selected = "selected" } } // note: if value is not equal, selected stays defaulted to nothing as explained earlier echo '<option value = "' . $i . '"' . $selected . '>' . $arr[$i] . '</option>'; // echo the option element to the page using the $selected variable } ?> </select> <!-- finish the form in html --> <input type="text" value="" name="name"> <input type="submit" value="go" name="go"> </form> 只要这些值是按某种数字顺序（升序或降序）的整数，我的代码就可以工作。它的作用是在 html 中启动下拉列表，并在 php 代码中添加每个选项元素。但如果您有随机值，即：1、4、2、7、6，则它将不起作用。每个值必须是唯一的。

将项目添加到 DataBound 下拉列表

是的，我已经阅读了这里的大部分主题，但我找不到有效的答案。 我有三个下拉列表。第一个是数据绑定以获取不同的实验名称。用户选择，页面发布...

kivymd：如何在下拉菜单中添加图标？

我想在下拉菜单中添加一个左侧图标。它可以通过多种方式实施。但我需要在下面的脚本中实现它，这是不正确的。 这是我的脚本： 来自 kivy.lang imp...

只能让 CSS 下拉列表出现在悬停时

我想更改当前的菜单以允许一个下拉菜单：产品。 我的测试页面可以在这里找到这是我的 HTML： 我想更改当前的菜单以允许一个下拉菜单：产品。 我的测试页面可以在这里这是我的HTML： <nav> <ul class="menu"> <li class="current"><a href="">Home</a></li> <li><a href="">About Us</a></li> <li class="subNav"><a class="selected">Products</a> <ul> <li><a href="">Designer Bags</a> </li> <li><a href="">Cowhides</a> </li> <li><a href="">Hand-carved Geese</a> </li> <li><a href="">Antler Chandeliers</a> </li> </ul> <li><a href="">Gallery</a></li> <li><a href="">Shows</a></li> <li><a href="">Contact</a></li> <li><a href="" target="_blank">Shop</a></li> </ul> </nav> 我原来的CSS： .nav-buttons{text-align:center;padding-bottom:17px;} #nav{overflow:hidden;display:inline-block} #nav li{float:left;overflow:hidden;margin:0 10px} #nav li a{display:block;background:url(../images/pags.png) no-repeat 0 0; width:19px;height:19px; line-height:0;font-size:0; } #nav li a:hover,#nav li.showPage a{background-position: 0 bottom} nav{float:right;padding:12px 0 0 0} .menu { font-size:0; line-height:0; padding:0; z-index:99; position:relative; margin-right:21px; } .menu > li { position:relative; float:left; margin-left:11px; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; background:url(../images/point.png) } .menu li a{ color:#b3adad; font-size:18px; line-height:20px; display:block; position:relative; text-decoration:none !important; padding:7px 12px 9px; font-family: 'Noto Sans', sans-serif; } .menu li.current, .menu li:hover { background:#9c6f51; } .menu li.current a, .menu li:hover a{ color:#fff } 我今天刚刚添加了一点 CSS： nav a { font-weight: 800; padding: 5px 10px; display: block; } nav > ul > li.subNav ul { display: none; position: absolute; top: 100%; left: 0; white-space: nowrap; background: #fff; } nav ul li.subNav:hover ul { display: block; } 它似乎想要工作，但除非我将鼠标悬停在它上面，否则我看不到子菜单。 我来这里寻求帮助是因为我害怕弄乱原来的 CSS，从而破坏我在网站其余部分的导航。 我是否可以添加一些内容，使菜单仅出现在“subNav”类中，而不影响菜单或站点导航的其余部分？ （原始 CSS 附带此模板，我确实注意到 font-size:0 使用了几次。由于在我觉得需要添加下拉菜单之前菜单运行良好，所以我一直不愿意更改它，因为我会只是在尝试而不理解。） 我已经整理好了。 我必须更改“subNav”类中的背景颜色，以便显示站点菜单的整体字体颜色。 它就在那儿；我就是没看到。 <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> <ul class="dropdown-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 class="dropdown-header">Nav header</li> <li><a href="#">Separated link</a></li> <li><a href="#">One more separated link</a></li> </ul> </li> /* menu on hover - with animation */ .dropdown.drop-collapsed .dropdown-menu { height: 0 !important; z-index: -1; } .dropdown .dropdown-menu { overflow: hidden; -webkit-transition: height 0.65s ease; transition: height 0.65s ease; } .navbar-nav > li > .dropdown-menu { display: block; visibility: hidden; opacity: 0; filter: alpha(opacity=0); } .navbar-nav > li.open .dropdown-menu { visibility: visible; opacity: 1; filter: alpha(opacity=100); } jQuery(document).ready(function () { "use strict"; var $ = jQuery.noConflict(); function showMenu() { $(this).removeClass("drop-collapsed"); $(this).addClass("open"); } function hideMenu(){ $(this).removeClass("open"); var $dropdown = $(".dropdown"); $dropdown.each(function () { $(this).addClass("drop-collapsed"); }); } var $dropdown = $(".dropdown"); $dropdown.each(function () { var $this = $(this); var $dropmenu = $this.find(".dropdown-menu"); $dropmenu.css("height", $dropmenu.outerHeight()); $this.addClass("drop-collapsed"); }); // dropdown menu hover intent var hovsettings = { timeout:0, interval: 0, over: showMenu, out: hideMenu }; $(".dropdown").hoverIntent(hovsettings); });