使用jquery获取的url参数展开手风琴菜单，并将attr添加到所需的类中。

Question

晚上好，各位，我在更改div样式属性方面遇到了麻烦。所以，我有下面的代码: URL: www.example.com"/?page_id=410&ai1ec=action~oneday&post=289的示例

    $( document ).ready(function() {

function getUrlParameter(sParam)
{
    var sPageURL = window.location.search.substring(1);
    var sURLVariables = sPageURL.split('&');
    console.log(sURLVariables);

    for (var i = 0; i < sURLVariables.length; i++) 
    {
        var sParameterName = sURLVariables[i].split('=');
        if (sParameterName[0] == sParam) 
        {
            return sParameterName[1];
        }
    }

}

向下部分用于检查和添加样式属性。

    var blog = getUrlParameter('post');
console.log(blog);   
    var idx = 1;
    if ($('.ai1ec-event').hasClass('ai1ec-event-id-'+blog)){

    /*$('.ai1ec-event').addClass('ai1ec-expanded');*/
    $('.ai1ec-event-summary').eq(idx).attr('style','display:block');
    idx++;  
    }

});

我用它来扩展手风琴菜单，其中的邮政号码被选择，到目前为止，我已经做到了，但它只适用于第一手风琴(我现在有3，我计划把更多后，我修复)。

还有html代码：

<div class="ai1ec-date-events">
    <div class="ai1ec-event         ai1ec-event-id-290         ai1ec-event-instance-id-65">

        <div class="ai1ec-event-header"></div>
        <div class="ai1ec-event-summary " style="display: none;">
    </div>
</div>

<div class="ai1ec-date-events">
    <div class="ai1ec-event         ai1ec-event-id-289         ai1ec-event-instance-id-66">

        <div class="ai1ec-event-header"></div>
        <div class="ai1ec-event-summary " style="display: block;">
    </div>
</div>

<div class="ai1ec-date-events">
    <div class="ai1ec-event         ai1ec-event-id-288         ai1ec-event-instance-id-67">

        <div class="ai1ec-event-header"></div>
        <div class="ai1ec-event-summary " style="display: none;">
    </div>

​

因此，我需要更改ai1ec-事件摘要样式，以显示:块；但我只能完成一个手风琴。有人有建议怎么做吗？

Answer 1

将您的函数修改为：

if ($('.ai1ec-event').hasClass('ai1ec-event-id-'+blog)) {
    $('.ai1ec-event-id-'+blog+' .ai1ec-event-summary').attr('style','display:block');
}

因为您有博客id，所以不需要跟踪面板的索引。

Answer 2

首先，您应该只有(1)包装器元素并删除类名：

<div class="ai1ec-date-events">
    <div class="ai1ec-event" data-id="290" data-instance="65">
        <div class="ai1ec-event-header"></div>
        <div class="ai1ec-event-summary"></div>
    </div>
    ....
    ....
</div>

CSS

.ai1ec-event-summary {
   display: none;
   margin: 2em 0; /* or whatever */
}

jQuery

// get the post id
// find the correct accordion with the data attribute
// hide other accordions (in the event that you can open them by clicking something).
// set 'active' class to open accordion
$(function () {
     var postId = getParameterByName('post');
     var $div = $('.ai1ec-date-events').find('.ai1ec-event[data-id="' + postId + '"]').find('div:first');

     if (!$div.hasClass('active')) {
         $div.closest('.ai1ec-date-events')
             .find('.active')
             .removeClass('active')
             .slideUp();

         $div.addClass('active').slideDown();
     }
});


function getParameterByName(name) {
    name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
    var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
        results = regex.exec(location.search);
    return results == null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}