如何使用来自不同页面的链接展开下拉列表

Question

我的任务是为我的公司创建一个登录页面，该页面将容纳数百份工作援助 PDF 文档。为了使内容更易于管理，我使用 aria-controls 将文档放在下拉列表中。此外，还会有各种入站链接指向页面上的特定文档。由于所有文档都隐藏在下拉列表中（并且下拉列表不必要地折叠），最终用户会发现很难找到所需的文档。添加锚链接无济于事，因为文档将隐藏在下拉列表中。

我想看看是否有一种方法可以使用入站链接扩展所需的下拉列表。我相信它可能涉及 jquery，我需要一些帮助。该线程接近（Expand multiple dropdown menus using a href link），但在这种情况下，链接在同一页面上，而不是在完全不同的页面上。我找不到将其应用于我的问题的方法。我们将此页面称为https://example.com/test。下面的代码有效，我只需要添加到它以展开所需的下拉列表。例如，入站链接是：

<a href="https://example.com/test#doc1" target="_blank">Link to item 1 in dropdown 1</a>

代码如下：

<script>$( document ).ready(function() {

 $( "#collapsebutton" ).hide();

  $( "#expandbutton" ).click(function() {
  $('div.panel-collapse').addClass('in').css("height", "");
  $( "#expandbutton" ).hide();
  $( "#collapsebutton" ).show();
  });

  $( "#collapsebutton" ).click(function() {
  $('div.panel-collapse').removeClass('in');
  $( "#expandbutton" ).show();
  $( "#collapsebutton" ).hide();
  });

  $( "div.panel a" ).click(function() {
    $('div.panel-collapse').each(function( index ) {
      if($( this ).hasClass('in') ){
      $( "#expandbutton" ).show();
      $( "#collapsebutton" ).hide();
      }
    });
  });

});</script>

<!-- Begin Expand/collapse all button -->
<div class="nodisp expandcollapse btn btn-small btn-success no-print" id="collapsebutton" style="margin: 10px 0px; float:right;"><i class="glyphicon glyphicon-minus"></i> Collapse All</div>

<div class="disp expandcollapse btn btn-small btn-success no-print" id="expandbutton" style="margin: 10px 0px; float:right;"><i class="glyphicon glyphicon-plus"></i> Expand All</div>
<!-- End Expand/Collapse all Button-->

<div aria-multiselectable="true" class="panel-group" id="section1" role="tablist">

<!-- Begin Dropdown 1 -->
<div class="panel panel-default">
    <div class="panel-heading" id="headingOne" role="tab" style="background-color:#ececf1">
    <h4 class="panel-title"><a aria-controls="collapseOne" aria-expanded="true" data-parent="#accordion" data-toggle="collapse" href="#collapseOne" role="button"><b>Dropdown 1</b><i class="fa fa-caret-down fa-fw"></i></a></h4>
    </div>

    <div aria-labelledby="headingOne" class="panel-collapse collapse" id="collapseOne" role="tabpanel">
        <div class="panel-body">
        <ul>
            <li id="doc1">Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
            <li>Item 4</li>
            
        </ul>
        </div>
    </div>
</div>
<!-- End Dropdown 1 -->

<!-- Begin Dropdown 2 -->
<div class="panel panel-default">
    <div class="panel-heading" id="headingTwo" role="tab" style="background-color:#ececf1">
    <h4 class="panel-title"><a aria-controls="collapseTwo" aria-expanded="false" class="collapsed" data-parent="#accordion" data-toggle="collapse" href="#collapseTwo" role="button"><b>Dropdown 2</b><i class="fa fa-caret-down fa-fw"></i></a></h4>
    </div>

    <div aria-labelledby="headingTwo" class="panel-collapse collapse" id="collapseTwo" role="tabpanel">
        <div class="panel-body">
        <ul>
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
            <li>Item 4</li>
        </ul>
        </div>
    </div>
</div>
<!-- End Dropdown 2 --> 
</div>

感谢任何帮助！

Answer 1

如果您正在寻找链接到完全其他页面的下拉菜单，则需要更改以下行：

<li>item 1</li>

到：

<li><a href="#">Name</a></li>

“#”代表另一个页面的链接，例如：www.google.nl，或www.example.com/doc1。