drop-down-menu 相关问题

在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

drop-down-menu 相关问题

最新问题