Как раскрыть раскрывающийся список с помощью ссылки с другой страницы - PullRequest
Новая
       151

Как раскрыть раскрывающийся список с помощью ссылки с другой страницы

0 голосов
/ 14 июля 2020

Мне было поручено создать целевую страницу для моей компании, на которой будут размещены сотни документов в формате PDF с инструкциями по работе. Чтобы сделать контент более управляемым, я разместил документы в раскрывающихся списках с помощью элементов управления aria. Кроме того, будут различные входящие ссылки, указывающие на определенные c документы на странице. Поскольку все документы скрыты в раскрывающихся списках (а раскрывающиеся списки свернуты по необходимости), конечным пользователям будет сложно найти нужный документ. Добавление якорных ссылок не поможет, поскольку документы будут скрыты в раскрывающемся списке.

Я хотел бы посмотреть, есть ли способ раскрыть нужный раскрывающийся список с помощью входящей ссылки. Я считаю, что это может включать jquery, и мне понадобится помощь. эта ветка подошла близко ( Разверните несколько раскрывающихся меню, используя ссылку href ), но в этом случае ссылка была на той же странице, а не на совершенно другой странице. Я не мог найти способ применить это к моей проблеме. Мы назовем эту страницу 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>

Любая помощь приветствуется!

1 Ответ

0 голосов
/ 14 июля 2020

Если вы ищете раскрывающееся меню, связанное с совершенно другой страницей, вам необходимо изменить следующую строку: 

<li>item 1</li>

на: 

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

Знак "#" означает ссылка на другую страницу, например: www.google.nl или www.example.com/doc1.

...