單擊按鈕時重定向到其他鏈接

Question

我有一個包含內容的sidR菜單：

<li class="sidr-class-dropdown">
    <a href="#" class="sidr-class-dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">News</a>
    <ul class="sidr-class-dropdown-menu>
        <li>
            <a href="/website/page1">Page 1</a>
        </li>
        <li>
            <a href="/website/page2">Page 2</a>
        </li>
        <li>
            <a href="/website/page1">Page 3</a>
        </li>
    </ul>
</li>

每個頁面的href都是未知的，cms為它提供一個ID。

盡管a class =“ sidr-class-dropdown-toggle”>具有href，但它不是正確的鏈接，但是當單擊a類時，如何定向到首頁href。

我想用CSS隱藏sidr-class-dropdown-menu的內容，只顯示一個類“ sidr-class-dropdown-toggle”，以便它單擊到第一個鏈接。

Answer 1

只需添加display: none; 到<ul class="sidr-class-dropdown-menu>來隱藏它。

Answer 2

您想要捕獲click事件，阻止默認操作，然后顯示菜單並在找到的第a元素上強制單擊。

 $('.sidr-class-dropdown-toggle').on('click', function(event) { event.preventDefault(); $('.sidr-class-dropdown-menu').show().find('li:first-child a')[0].click(); }); 

 .sidr-class-dropdown-menu { display: none; } .sidr-class-dropdown-menu a:visited { color: red; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="sidr-class-dropdown"> <a href="#" class="sidr-class-dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">News</a> <ul class="sidr-class-dropdown-menu"> <li> <a href="#page1">Page 1</a> </li> <li> <a href="#page2">Page 2</a> </li> <li> <a href="#page3">Page 3</a> </li> </ul> </div>