如何展开嵌套 Bootstrap 4 从 URL 折叠？

Question

我有一个嵌套的 Bootstrap 4 Collapse。外部崩溃由天组成，而内部崩溃由发生在特定日期的事件组成。大概长这样...

<!-- HEADER DAY 1-->
<div data-toggle="collapse" data-target="#day-unixtimestamp1" role="button" aria-expanded="false" aria-controls="#day-unixtimestamp1" >
DAY ONE (e.g. October 25th, 2021)  
</div>
  
<!-- BODY DAY 1 --> 
<div class="body collapse" id="day-unixtimestamp1">


    <!-- HEADER EVENT 1-->
    <div data-toggle="collapse" data-target="#event-unixtimestamp1-event1" role="button" aria-expanded="false" aria-controls="#event-unixtimestamp1-event1" >
    NAME EVENT 1  
    </div>
      
    <!-- BODY EVENT 1 --> 
    <div class="body collapse" id="event-unixtimestamp1-event1">
    ...some content
    </div>

    <!-- HEADER EVENT 2-->
    <div data-toggle="collapse" data-target="#event-unixtimestamp1-event2" role="button" aria-expanded="false" aria-controls="#event-unixtimestamp1-event2" >
    NAME EVENT 2  
    </div>
      
    <!-- BODY EVENT 2 --> 
    <div class="body collapse" id="event-unixtimestamp1-event2">
    ...some content
    </div>


</div>

我使用 WordPress 和自定义代码从数据库加载日期和事件并循环处理它们。到目前为止一切正常。

用户通过提交表单创建新事件后，他应该被重定向到嵌套的页面 Bootstrap 4 Collapse 并且两者都应该打开：新事件的折叠和折叠的折叠关联日。

我可以使用以下内容扩展事件 URL： https://website.de/nested-collapse-page/#event-unixtimestamp1-event1

和下面的代码...

<script>
jQuery($ => {
  
  if (window.location.hash) {   
    
    var hash = window.location.hash;    
       
    $(hash).collapse('show');
    
    $('html, body').animate({
    scrollTop: $(hash).offset().top - 180
    }, 500 );
    
  }
});
</script>

但是我也有点不知道如何打开相关的一天...非常感谢您的提示:)

Answer 1

您正在测试的内容：

这里，你只是window.location.href

之后的内容

场景：如果你的内容是

google.com/welcome#chapter4

你会得到

#chapter4

我会做什么：

基于this subject about getting querystring with pure JS (no jQuery)，你可以定义这个函数：

function getParameterByName(name, url = window.location.href) {
    name = name.replace(/[\[\]]/g, '\$&');
    var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'),
        results = regex.exec(url);
    if (!results) return null;
    if (!results[2]) return '';
    return decodeURIComponent(results[2].replace(/\+/g, ' '));
}

然后使用是在您的 URL 中获取数据，如下所示：

getParameterByName('day')

你的情况：

将 ?day=currentDay 添加到您的 URL 将向您的本地 JS 证明当天的信息。总之，trigger the bootstrap collapse event根据这个查询字符串的内容

完整示例：

// Set the function to get query strings
function getParameterByName(name, url = window.location.href) {
    name = name.replace(/[\[\]]/g, '\$&');
    var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'),
        results = regex.exec(url);
    if (!results) return null;
    if (!results[2]) return '';
    return decodeURIComponent(results[2].replace(/\+/g, ' '));
}

// Store day spevified in url in a var
var whichDayInURL = getParameterByName('day');

// Test content and trigger related collapse menu
switch (whichDayInURL) {

    case 'dayOfEvent1':
        $(event-unixtimestamp1-event1).collapse('show');
        break;
    case 'dayOfEvent2':
        $(event-unixtimestamp1-event2).collapse('show');
        break;
    case 'dayOfEvent3':
        $(event-unixtimestamp1-event3).collapse('show');
        break;

}

Answer 2

非常感谢“z4nzi”。他引导我朝着正确的方向前进。我从#hash 切换到 URL 参数。

这是最终的解决方案....

我将此 URL 与参数“tday”和“tevent”一起使用：

https://website.de/nested-collapse-page/?tday=tag-1635379200&tevent=event-55700-1635379200

这是我的 嵌套 Bootstrap 4 折叠 (HTML)。确保在页面上加载 Bootstrap 4... :


    <!-- HEADER DAY 1-->
    <div data-toggle="collapse" data-target="#day-unixtimestamp1" role="button" aria-expanded="false" aria-controls="#day-unixtimestamp1" >
    DAY ONE (e.g. October 25th, 2021)  
    </div>
      
    <!-- BODY DAY 1 --> 
    <div class="body collapse" id="day-unixtimestamp1">
    
    
        <!-- HEADER EVENT 1-->
        <div data-toggle="collapse" data-target="#event-unixtimestamp1-event1" role="button" aria-expanded="false" aria-controls="#event-unixtimestamp1-event1" >
        NAME EVENT 1  
        </div>
          
        <!-- BODY EVENT 1 --> 
        <div class="body collapse" id="event-unixtimestamp1-event1">
        ...some content
        </div>
    
        <!-- HEADER EVENT 2-->
        <div data-toggle="collapse" data-target="#event-unixtimestamp1-event2" role="button" aria-expanded="false" aria-controls="#event-unixtimestamp1-event2" >
        NAME EVENT 2  
        </div>
          
        <!-- BODY EVENT 2 --> 
        <div class="body collapse" id="event-unixtimestamp1-event2">
        ...some content
        </div>
    
    
    </div>
    
    
    <!-- HEADER DAY 2-->
    <div data-toggle="collapse" data-target="#day-unixtimestamp2" role="button" aria-expanded="false" aria-controls="#day-unixtimestamp2" >
    DAY TWO (e.g. October 26th, 2021)  
    </div>
      
    <!-- BODY DAY 2 --> 
    <div class="body collapse" id="day-unixtimestamp2">
    
    
        <!-- HEADER EVENT 3-->
        <div data-toggle="collapse" data-target="#event-unixtimestamp2-event3" role="button" aria-expanded="false" aria-controls="#event-unixtimestamp2-event3" >
        NAME EVENT 3  
        </div>
          
        <!-- BODY EVENT 3 --> 
        <div class="body collapse" id="event-unixtimestamp2-event3">
        ...some content
        </div>
    
        <!-- HEADER EVENT 4-->
        <div data-toggle="collapse" data-target="#event-unixtimestamp2-event4" role="button" aria-expanded="false" aria-controls="#event-unixtimestamp2-event4" >
        NAME EVENT 4  
        </div>
          
        <!-- BODY EVENT 4 --> 
        <div class="body collapse" id="event-unixtimestamp2-event4">
        ...some content
        </div>
    
    
    </div>

这是检索 URL 参数的 对应 jQuery

代码来源：

// jQuery plugin, that retrievers all params from the URL
// Source: 
<script>
(function($) {
    $.QueryString = (function(paramsArray) {
        let params = {};

        for (let i = 0; i < paramsArray.length; ++i)
        {
            let param = paramsArray[i]
                .split('=', 2);
            
            if (param.length !== 2)
                continue;
            
            params[param[0]] = decodeURIComponent(param[1].replace(/\+/g, " "));
        }
            
        return params;
    })(window.location.search.substr(1).split('&'))
})(jQuery);
</script>

...我将它与我自己的代码结合起来：

// **open nested Bootstrap 4 Collapse (both the child and the parent element) and scroll**
<script>
jQuery($ => {
  
//ExampleURL: https://website.de/nested-collapse-page/?tday=tag-1635379200&tevent=event-55700-1635379200 -> tday and tevent are the corresponding URL parameter

  // Bootstrap 4 Collapse needs the #. Otherwise the targeted element will not show
  
  var day = "#" + $.QueryString.tday;
  var event = "#" + $.QueryString.tevent;

  $(day).collapse('show');
  $(event).collapse('show'); 

  $('html, body').animate({
  scrollTop: $(day).offset().top - 200
  }, 500 ); // 500 is the speed of the animation  
 
       
});
</script>

如何展开嵌套 Bootstrap 4 从 URL 折叠？

How to expand nested Bootstrap 4 Collapse from URL?

jquery

bootstrap-4

您正在测试的内容：

我会做什么：

你的情况：