jquery - 如何覆盖 jQuery 下拉 UI 样式？

Question

我想寻求有关 jquery Accordion 实现的技术帮助。

我有这个现有页面

我在页面中实现了 jQuery Accordion UI，现在是这样的

但是，我遇到了覆盖 UI 样式的问题。正如您在第二个图像附件中注意到的那样，按类别过滤 下拉列表不再显示。如何覆盖此 UI 样式？

这是现有代码(在我实现 jQuery 之前)

<div class="fields">
    <div class="ui-select">
        <div id="category-button" 
             class="ui-btn ui-icon-carat-d ui-btn-icon-right ui-corner-all ui-shadow">
            <span>Filter by Category</span>
            <select onchange="document.techforms.submit();" id="category" name="category">
                <option value="">Filter by Category</option>
                <option value="4">Administration</option>
                <option value="5">Audits and Reports</option>
                <option value="6">Commissioning</option>
                <option value="7">Documentation</option>
                <option value="8">ETTiS</option>
                <option value="9">Materials</option>
                <option value="11">Permit and Requests</option>
                <option value="12">Permits and Requests</option>
                <option value="13">Project Management</option>
                <option value="14">Project Specific Forms</option>
                <option value="15">OHS FORMS</option>
                <option value="61">Test Sheets &amp; Commissioning Document Templates</option>
            </select>
        </div>
    </div>
</div>

现在，这是我实现 jquery ui 库后的代码

<div class="fields">
    <select name="category" id="category" onchange="document.techforms.submit();" style="display: none;">
        <option value="">Filter by Category</option>
        <option value="4">Administration</option>
        <option value="5">Audits and Reports</option>
        <option value="6">Commissioning</option>
        <option value="7">Documentation</option>
        <option value="8">ETTiS</option>
        <option value="9">Materials</option>
        <option value="11">Permit and Requests</option>
        <option value="12">Permits and Requests</option>
        <option value="13">Project Management</option>
        <option value="14">Project Specific Forms</option>
        <option value="15">OHS FORMS</option>
        <option value="61">Test Sheets &amp; Commissioning Document Templates</option>
    </select>
    <span class="ui-selectmenu-button ui-widget ui-state-default ui-corner-all" tabindex="0" id="category-button" role="combobox" aria-expanded="false" aria-autocomplete="list" aria-owns="category-menu" aria-haspopup="true" style="width: 0px;"><span class="ui-icon ui-icon-triangle-1-s"></span><span class="ui-selectmenu-text">Filter by Category</span></span>
</div>

有什么办法可以解决这个问题吗？我想保留 按类别过滤 下拉列表的现有设计。

Answer 1

好的!!

我认为您在修改后的代码片段中遗漏了这些。

<div class="ui-select">
    <div id="category-button" 
         class="ui-btn ui-icon-carat-d ui-btn-icon-right ui-corner-all ui-shadow">

将以上行添加到 div而不是 <span>