Как переопределить стили пользовательского интерфейса jQuery?

Я хотел бы обратиться за технической помощью относительно реализации аккордеона jquery.Как переопределить стили пользовательского интерфейса jQuery?

У меня есть эта существующей страница

и я реализовал JQuery Аккордеон UI на странице, которая теперь, как этого

Однако я испытываю проблему переопределения стилей пользовательского интерфейса. Как вы можете заметить, во втором прикреплении изображения выпадающее меню Filter by Category больше не отображается. Как я могу переопределить эти стили пользовательского интерфейса?

Это существующий код (до того, как реализовать 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 щ

<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>

Есть ли возможный способ решить эту проблему ? Я хочу сохранить существующий дизайн выпадающего списка Filter by Category.

источник

2015-08-27 nhoyti

@DavidDomain что вы имеете в виду, сэр? – nhoyti

Вы заметили это 'style =" display: none; "'? На самом деле вы не обращаете внимания на это выпадающее меню после jQuery-кода реализации кода – Babel

@Babel yep..i видел это, но это уже, даже если я удалил этот стиль. он покажет простой раскрывающийся список без стиля. Мне хотелось, чтобы это произошло, чтобы сохранить оригинальный стиль выпадающего списка. – nhoyti

Хорошо!

Я думаю, вам не хватает их в вашем измененном фрагменте кода.

<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>

источник

2015-08-27 08:58:12 Babel

Как переопределить стили пользовательского интерфейса jQuery?

ответ

Смежные вопросы