drop-down-menu 相关问题

用户界面控件GUI元素，类似于列表框，允许用户从列表中选择一个值。当下拉列表处于非活动状态时，它会显示单个值。激活后，它会显示（下拉）一个值列表，用户可以从中选择一个值。

在index.html中，我包含了这些 <p>在index.html中，我包含了这些</p> <pre><code> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/@popperjs/<a href="/cdn-cgi/l/email-protection" data-cfemail="492a263b2c097b6770677a">[email protected]</a>/dist/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> </code></pre> <p>导致错误的代码是以下前进按钮：</p> <pre><code><div className="btn-group float-right" role="group" aria-label="Button group"> <div className="dropdown"> <button className="btn btn-success dropdown-toggle" type="button" id={`forwardDropdown-${issue.issueId}`} data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Forward </button> <div className="dropdown-menu" aria-labelledby={`forwardDropdown-${issue.issueId}`}> <a className="dropdown-item" href="#">Action</a> <a className="dropdown-item" href="#">Another action</a> <a className="dropdown-item" href="#">Something else here</a> </div> </div> <button type='button' className="btn btn-danger">Discard</button> </div> </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.<anonymous> (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.<anonymous> (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><script src="https://cdn.jsdelivr.net/npm/@popperjs/<a href="/cdn-cgi/l/email-protection" data-cfemail="c1a2aeb3a481f3eff8eff2">[email protected]</a>/dist/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>``` When I changed to these versions below, my bootstrap dropdown started working properly. ```<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" data-cfemail="68180718180d1a46021b285946595e4659">[email protected]</a>/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" data-cfemail="0b6964647f787f796a7b4b3f253e2538">[email protected]</a>/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>``` 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>

javascript jquery bootstrap-4 drop-down-menu dropdown

回答 0 投票 0

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

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

c# winforms datagridview drop-down-menu datagridcomboboxcolumn

回答 4 投票 0

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 秒的应用程序性能。这就是图表的样子。我的应用程序性能的屏幕截图。

reactjs select input drop-down-menu material-ui

回答 2 投票 0

CSS - 下拉菜单定位

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

html css drop-down-menu

回答 1 投票 0

有没有办法确定<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>

javascript dom menu popup drop-down-menu

回答 0 投票 0

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>   </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>   </head> <body> <script src="bootstrap/js/bootstrap.min.js"></script> </body> </code></pre> </answer> </body></html>

drop-down-menu bootstrap-5

回答 0 投票 0

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

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

html drop-down-menu

回答 1 投票 0

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

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

html select drop-down-menu

回答 3 投票 0

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

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

pandas drop-down-menu plotly

回答 1 投票 0

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

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

google-sheets drop-down-menu dropdown spreadsheet

回答 1 投票 0

如何用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; ?>  <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>  <input type="text" value="" name="name"> <input type="submit" value="go" name="go"> </form> 只要这些值是按某种数字顺序（升序或降序）的整数，我的代码就可以工作。它的作用是在 html 中启动下拉列表，并在 php 代码中添加每个选项元素。但如果您有随机值，即：1、4、2、7、6，则它将不起作用。每个值必须是唯一的。

php select drop-down-menu return html-select

回答 0 投票 0

将项目添加到 DataBound 下拉列表

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

c# asp.net data-binding list drop-down-menu

回答 7 投票 0

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

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

python drop-down-menu kivymd

回答 2 投票 0

只能让 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); });

css drop-down-menu hover

回答 2 投票 0

如何创建可用员工的下拉列表来填充一系列日期之间的轮班？

给定一组员工、之前安排的轮班和新的未安排轮班；我可以创建一个下拉列表，仅显示未在日期范围内安排的员工姓名...

excel date drop-down-menu schedule

回答 1 投票 0

我如何从所选元素（选项）中获取值，我有超过20个选择元素

我如何从 HTML 中选择所有“选择元素”，并从所选选项中获取值。我如何检索从选项中选择的值，我想迭代选择的元素...

javascript foreach drop-down-menu return-value selectors-api

回答 1 投票 0

如何在 Bootstrap 5 中单击下拉菜单时激活第一个菜单项

Bootstrap 5 下拉菜单定义为 Bootstrap 5 下拉菜单定义为 <div class="btn-group"> <button type="button" class="btn btn-danger dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false"> Action </button> <ul class="dropdown-menu"> <li><a class="dropdown-item" href="#"><u>A</u>ction</a></li> <li><a class="dropdown-item" href="#">A<u>n</u>other action</a></li> <li><a class="dropdown-item" href="#"><u>S</u>omething else here</a></li> <li><hr class="dropdown-divider"></li> <li><a class="dropdown-item" href="#">S<u>e</u>parated link</a></li> </ul> </div> https://jsfiddle.net/b6or2s5e/ 如果单击“操作”按钮，第一个菜单项“操作”未激活（突出显示）：需要按向下箭头才能激活它：如何修复它，以便打开下拉菜单突出显示第一项，就像普通 Windows 桌面应用程序菜单中一样？您只需在引导程序中添加内置的 active 类，它就会为您提供蓝色背景。只需获取下拉菜单中的第一个链接并将 active 添加到其 classList 即可。使用 Boot Strap 时有一些注意事项。超越 BS 课程通常具有挑战性。将 a 标签类设置为 dropdown-item 时，背景默认设置为“透明”，这不能用类覆盖，除非您的类来自具有相同名称并位于 BS CSS 下的 css 样式表CDN。但是内联样式会覆盖背景。此外，如果您希望下拉菜单项具有悬停效果，您可以使用 JS eventListeners 来设置内联样式，就像我对代码片段中的代码所做的那样。如果您只想要第一个项目集 - document.addEventListener("DOMContentLoaded", function() { // using built in active class from bootstrap // use querySelector() to get first occurance of an element const sections = document.querySelector('li a'); // get first element of the nodelist and add active class to classList sections.classList.add('active'); // using inline style to override BS dorpdow-item class const dropdown2 = document.querySelectorAll('.dropdown-menu')[1]; const sections2 = dropdown2.querySelector('li a'); sections2.style.backgroundColor = 'rgb(225,225,255)'; }); /* added to remove any mouseover events from firing on hover of underlined element */ u { pointer-events: none; } <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous"> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script> <div class="d-flex justify-content-around">  <div class="btn-group">  <button type="button" class="btn btn-danger dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false"> Action </button> <ul class="dropdown-menu"> <li><a class="dropdown-item" href="#section1"><u>A</u>ction</a></li> <li><a class="dropdown-item" href="#section2">A<u>n</u>other action</a></li> <li><a class="dropdown-item" href="#section3"><u>W</u>e have a link</a></li> <li><a class="dropdown-item" href="#section4"><u>S</u>omething else here</a></li> <li> <hr class="dropdown-divider"> </li> <li><a class="dropdown-item" href="#section5">S<u>e</u>parated link</a></li> </ul> </div>  <div id="vertical-space"> </div> <br><br>  <div class="btn-group">  <button type="button" class="btn btn-danger dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false"> Action </button> <ul class="dropdown-menu"> <li><a class="dropdown-item" href="#section1"><u>A</u>ction</a></li> <li><a class="dropdown-item" href="#section2">A<u>n</u>other action</a></li> <li><a class="dropdown-item" href="#section3"><u>W</u>e have a link</a></li> <li><a class="dropdown-item" href="#section4"><u>S</u>omething else here</a></li> <li> <hr class="dropdown-divider"> </li> <li><a class="dropdown-item" href="#section5">S<u>e</u>parated link</a></li> </ul> </div>  <div id="vertical-space"> </div> </div> 如果您想在其他链接上鼠标悬停（悬停）- document.addEventListener("DOMContentLoaded", function() { const dropdownMenu = document.querySelector('.dropdown-menu'); const action = document.querySelector('.btn'); const sections = dropdownMenu.querySelectorAll('li a'); // get first element of the nodelist and set to active sections[0].classList.add('active'); // override the bootstrap dropdown-item classes background // which is set to transparent by default // while built in class `active` is present // using a method with mouseover/mouseout events const highlight = (e) => { // conditional event type is mouseover and target is not the active class if(e.type === 'mouseover' && !e.target.classList.contains('active')){ // override the bootstrap transparent background // using inline styles for hovered links e.target.style.backgroundColor = 'rgb(225, 225, 225)'; // else if conditional for mouseout and target is not the active class }else if(e.type === 'mouseout' && !e.target.classList.contains('active')){ // reset the bootstrap transparent background using inline styles e.target.style.backgroundColor = 'transparent'; } } // loop over the dropdown links and add eventListsners calling highlight method sections.forEach(sec => { sec.addEventListener('mouseover', highlight); sec.addEventListener('mouseout', highlight); }) }); /* added to remove any mouseover events from firing on hover of underlined element */ u { pointer-events: none; } <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous"> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>  <div class="btn-group">  <button type="button" class="btn btn-danger dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false"> Action </button> <ul class="dropdown-menu"> <li><a class="dropdown-item" href="#section1"><u>A</u>ction</a></li> <li><a class="dropdown-item" href="#section2">A<u>n</u>other action</a></li> <li><a class="dropdown-item" href="#section3"><u>W</u>e have a link</a></li> <li><a class="dropdown-item" href="#section4"><u>S</u>omething else here</a></li> <li> <hr class="dropdown-divider"> </li> <li><a class="dropdown-item" href="#section5">S<u>e</u>parated link</a></li> </ul> </div>  <div id="vertical-space"> </div> 您还可以使用内联样式为第一个项目定义自己的样式 - document.addEventListener("DOMContentLoaded", function() { const dropdownMenu = document.querySelector('.dropdown-menu'); const action = document.querySelector('.btn'); const sections = dropdownMenu.querySelectorAll('li a'); // get first element of the nodelist and background-color sections[0].style.backgroundColor = 'rgb(190, 190, 190)'; // override the bootstrap dropdown-item classes background // which is set to transparent by default // while built in class `active` is present // using a method with mouseover/mouseout events const highlight = (e) => { // conditional event type is mouseover and target is not the first item if(e.type === 'mouseover' && e.target !== sections[0]){ // override the bootstrap transparent background // using inline styles for hovered links e.target.style.backgroundColor = 'rgb(225, 225, 225)'; // else if conditional for mouseout andtarget is not the first item }else if(e.type === 'mouseout' && e.target !== sections[0]){ // reset the bootstrap transparent background using inline styles e.target.style.backgroundColor = 'transparent'; } } // loop over the dropdown links and add eventListsners calling highlight method sections.forEach(sec => { sec.addEventListener('mouseover', highlight); sec.addEventListener('mouseout', highlight); }) }); /* added to remove any mouseover events from firing on hover of underlined element */ u { pointer-events: none; } <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous"> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>  <div class="btn-group">  <button type="button" class="btn btn-danger dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false"> Action </button> <ul class="dropdown-menu"> <li><a class="dropdown-item" href="#section1"><u>A</u>ction</a></li> <li><a class="dropdown-item" href="#section2">A<u>n</u>other action</a></li> <li><a class="dropdown-item" href="#section3"><u>W</u>e have a link</a></li> <li><a class="dropdown-item" href="#section4"><u>S</u>omething else here</a></li> <li> <hr class="dropdown-divider"> </li> <li><a class="dropdown-item" href="#section5">S<u>e</u>parated link</a></li> </ul> </div>  <div id="vertical-space"> </div>

javascript html twitter-bootstrap drop-down-menu bootstrap-5

回答 1 投票 0

如何在asp.net c#中通过javascript获取选择组合框中选定文本的值

如何通过选择组合框从所选文本中获取值？这是绑定组合框的 aspx.cs 代码 service.BindHTMLDropdownList(cmb_labelno, "tbl_StockRunning", "StockTagNo", &

javascript jquery asp.net drop-down-menu return-value

回答 1 投票 0

如何通过按键盘按键激活引导下拉菜单项

Bootstrap 5 导航栏包含下拉菜单。下拉菜单有下划线热键，例如 a,n,s,e ： Bootstrap 5 导航栏包含下拉菜单。下拉菜单有下划线热键，如 a、n、s、e : <div class="btn-group"> <button type="button" class="btn btn-danger dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false"> Action </button> <ul class="dropdown-menu"> <li><a class="dropdown-item" href="#"><u>A</u>ction</a></li> <li><a class="dropdown-item" href="#">A<u>n</u>other action</a></li> <li><a class="dropdown-item" href="#"><u>S</u>omething else here</a></li> <li><hr class="dropdown-divider"></li> <li><a class="dropdown-item" href="#">S<u>e</u>parated link</a></li> </ul> </div> 键盘按下按键如何激活菜单项？例如，如果下拉菜单打开，按 A 应该像单击操作菜单项一样。 jsfiddle：https://jsfiddle.net/b6or2s5e/ 左右箭头已使用处理如何使用左右箭头键在引导导航栏中导航 document.addEventListener("DOMContentLoaded", function () { document.querySelectorAll('.dropdown').forEach(function (el) { el.addEventListener('shown.bs.dropdown', function () { document.addEventListener('keydown', function (e) { const click = new MouseEvent("click", { bubbles: true, cancelable: true, view: window, }) if (e.key === "ArrowRight") { const o = getNextSibling(e.target.closest('.dropdown'), '.dropdown') if (!o) { document.querySelector('.dropdown-toggle').dispatchEvent(click) } else { o.querySelector('.Xdropdown-toggle').dispatchEvent(click) } } else if (e.key === "ArrowLeft") { const o = getPrevSibling(e.target.closest('.dropdown'), '.dropdown') if (!o) { const ar = document.querySelectorAll('.dropdown-toggle') ar[ar.length - 1].dispatchEvent(click) } else { o.querySelector('.dropdown-toggle').dispatchEvent(click) } } }, { once: true }) }) }) }) 如何添加热键处理？这是一个采用动态方法的更新代码片段，方法是获取下划线元素，并在下划线元素上使用 forEach 循环 nodelist 将 window 上的 keydown 事件与每个进行比较带下划线的元素 textContent 转换为小写。如果没有按下alt或ctrl，是否可以删除switch switch语句并为任何键调用findUnderlined？我相信您在问是否可以添加 control 和/或 alt 键，不是 100% 确定您的问题在这里，但您可以添加任何条件来控制您想要使用 keydown 控制的内容。只需将逻辑添加到条件中即可。请参阅下面片段中的更多注释... document.addEventListener("DOMContentLoaded", function() { // define a dropdownMenu variable using the dropdown instatiation button const dropdownMenu = document.querySelector('.dropdown-menu'); // helper method passing in the underlined elements nodelist // and both the action click and window keydown events const setClickForUnderlinedEls = (els, target, key) => { // get the dropdown parent element using the // event.target => target.nextElementSibling // you could also go with .closest() and then querySelectorAll() const nextEl = target.nextElementSibling; // loop over the underline elements nodelist els.forEach(sec => { // conditional to compare each nodelist with // the key that was actually pressed if (key === sec.textContent.toLowerCase()) { // instantiate a click for the corresponding matching // element that has the underlined element within it sec.click() } }) } // get the dropdown expansion button, I used an ID for this // as the class .btn is pretty common for bootstrap buttons const action = document.querySelector('#dropdown-btn'); // define a variable for the underline elements nodelist const sections = dropdownMenu.querySelectorAll('li u'); // click event for the dropdown button action.addEventListener('click', (event) => { // window event listener for keydown addEventListener('keydown', function(e) { // conditional to make sure the dropdown is opened // using the aria-expanded attribute if (event.target.ariaExpanded !== 'false') { // run helper function and pass in // nodelist, target parent element and keydown event.key params setClickForUnderlinedEls(sections, event.target, e.key); } }) }) }) document.addEventListener("DOMContentLoaded", function() { const dropdownMenu = document.querySelector('.dropdown-menu'); const action = document.querySelector('#dropdown-btn'); const sections = dropdownMenu.querySelectorAll('li u'); const setClickForUnderlinedEls = (els, target, key) => { const nextEl = target.nextElementSibling; els.forEach(sec => { if (key === sec.textContent.toLowerCase()) { sec.click() } }); } action.addEventListener('click', (event) => { addEventListener('keydown', (e) => { if (event.target.ariaExpanded !== 'false') { setClickForUnderlinedEls(sections, event.target, e.key); } }); }) }); #vertical-space, #section1, #section2, #section3, #section4, #section5{ height: 100vh; } <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous"> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>  <div class="btn-group" id="top">  <button id="dropdown-btn" type="button" class="btn btn-danger dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false"> Action </button> <ul class="dropdown-menu"> <li><a class="dropdown-item" href="#section1"><u>A</u>ction</a></li> <li><a class="dropdown-item" href="#section2">A<u>n</u>other action</a></li> <li><a class="dropdown-item" href="#section3"><u>W</u>e have a link</a></li> <li><a class="dropdown-item" href="#section4"><u>S</u>omething else here</a></li> <li> <hr class="dropdown-divider"> </li> <li><a class="dropdown-item" href="#section5">S<u>e</u>parated link</a></li> </ul> </div>  <div id="vertical-space"> </div> <div id="section1"> <p> You pressed the <strong>a</strong> button and instantiated a click on the <em>Action</em> button. <a href="#top">Back to top</a> </p> </div> <div id="section2"> <p> You pressed the <strong>n</strong> button and instantiated a click on the <em>Another action</em> button. <a href="#top">Back to top</a> </p> </div> <div id="section3"> <p> You pressed the <strong>w</strong> button and instantiated a click on the <em>We have a link</em> button. <a href="#top">Back to top</a> </p> </div> <div id="section4"> <p> You pressed the <strong>s</strong> button and instantiated a click on the <em>Something else here</em> button. <a href="#top">Back to top</a> </p> </div> <div id="section5"> <p> You pressed the <strong>e</strong> button and instantiated a click on the <em>Separate link</em> button. <a href="#top">Back to top</a> </p> </div>

javascript twitter-bootstrap drop-down-menu bootstrap-5 nav

回答 1 投票 0

如何在 NonFactors.Mvc.Grid 行上创建下拉列表？

我想在网格的每一行上创建一个下拉菜单，如图所示。但是，操作链接未以正确的方式呈现。我能做什么？在此输入图像描述这...

drop-down-menu bootstrap-5 nonfactors-mvc-grid

回答 1 投票 0

drop-down-menu 相关问题

最新问题