There are total two dropdowns in my templated, but none of them are working: the one with and without thymeleaf attributes. Didnt tried changing the css properties, because it was working properly before but now it doesnt work at all.
<div class="shop-product-fillter style-2">
<div class="totall-product">
<p> We found <strong class="text-brand">5 </strong> items for you!</p>
</div>
<div class="sort-by-product-area">
<div class="sort-by-cover mr-10">
<div class="sort-by-product-wrap">
<div class="sort-by">
<span><i class="fi-rs-apps"></i>Show:</span>
</div>
<div class="sort-by-dropdown-wrap">
<span> 50 <i class="fi-rs-angle-small-down"></i></span>
</div>
</div>
<div class="sort-by-dropdown">
<ul>
<li><a class="active" href="#">50</a></li>
<li><a href="#">100</a></li>
<li><a href="#">150</a></li>
<li><a href="#">200</a></li>
<li><a href="#">All</a></li>
</ul>
</div>
</div>
<div class="sort-by-cover">
<div class="sort-by-product-wrap">
<div class="sort-by">
<span><i class="fi-rs-apps-sort"></i>Sort by:</span>
</div>
<div class="sort-by-dropdown-wrap">
<span> High to Low <i class="fi-rs-angle-small-down"></i></span>
</div>
</div>
<div class="sort-by-dropdown">
<ul>
<li><a th:href="@{/shop-list-right}">Featured</a></li>
<li><a th:href="@{/low-price}">Price: Low to High</a></li>
<li><a class="active" th:href="@{/high-price}">Price: High to Low</a></li>
<li><a href="#">Release Date</a></li>
<li><a href="#">Avg. Rating</a></li>
</ul>
</div>
</div>
</div>
</div>
2
Answers
Check JavaScript/jQuery:
Ensure that you have the necessary JavaScript or jQuery code to handle the dropdown functionality. Check for any errors in the console related to JavaScript/jQuery.enter image description here
Add js to your
.htmlfile, drop-down wouldn’t work without js.