I am working with a WordPress blog that has multiple pages with dropdown subpages on hover. However, I only want the main pages to have links, not the subpages. To achieve this, I am using some basic JavaScript.
jQuery(document).ready(function(){
jQuery("#menus > li > a").attr("href","#");
});
The current script selects every anchor tag, but I need it to target only the main pages. Here is the HTML structure for reference:
Here's an explanation:
The structure includes an unordered list (ul) with list items (li) containing anchor tags. If a list item also contains another unordered list (ul), those are subpages that appear on hover. Therefore, the anchor in the initial list item should have a href of "#", while other anchors should keep their existing href.
<ul id="menus">
<li>
<a href="somelink">Main Page</a> // href should be changed to #
<ul>
<li>
<a href="somelink2/">Subpage1</a>
</li>
<li>
<a href="somelink3">Subpage2</a>
</li>
</ul>
</li>
<li>
<a href="somelink">MainPage-with-no-subpages</a> // href should not be changed
</li>
<li>
<a href="somelink4">MainPage</a> // href should be changed to #
<ul>
<li>
<a href="somelink5">Subpage</a>
</li>
<li>
<a href="somelink6">Subpage</a>
</li>
</ul>
</li>
</ul>