单击时如何让菜单栏中的 A href 链接在正文中打开一个关闭的手风琴？ - html

问题描述

当点击名为“打开第一个手风琴”的 a href 时，如何打开第一个手风琴，而第二个 a href 也是如此？手风琴本身 100% 正确工作，我只想从它的范围之外访问它，当点击菜单栏中的 a href 按钮时。

$(".expand").on("click",function () {
    $(".right-arrow").text("+");
    $(".detail:visible").slideUp();
    if(!$(this).next().is(":visible")){

        $(this).next().slideDown(200);
        $(this).find(".right-arrow").text("-");
    }
});

/*Tips & Tricks Page*/
*,*:before,*:after {
    -webkit-Box-sizing: border-Box; 
    -moz-Box-sizing: border-Box; 
    Box-sizing: border-Box;
}

#trickslist {
    font-family: 'Open Sans',sans-serif;
    width: 80%;
    margin: 0 auto;
    display: table;
}
#trickslist ul {
    padding: 0;
    margin: 20px 0;
    color: #555;
}
#trickslist ul > li {
    list-style: none;
    border-top: 1px solid #ddd;
    display: block;
    padding: 15px;
    overflow: hidden;
    text-align: center;
}
#trickslist ul:last-child {
    border-bottom: 1px solid #ddd;
}
#trickslist ul > li:hover {
    background: #efefef;
}
.expand {
    display: block;
    text-decoration: none;
    color: #555;
    cursor: pointer;
}
.tipstricks {
    padding: 5px;
    margin: 0;
    font-size: 17px;
    font-weight: 400;
}

span {
    font-size: 12.5px;
}
#left,#right{
    display: table;
}

.detail a {
    text-decoration: none;
    color: #C0392B;
    border: 1px solid #C0392B;
    padding: 6px 10px 5px;
    font-size: 14px;
}
.detail {
    margin: 10px 0 10px 0px;
    display: none;
    line-height: 22px;
    height: 150px;
}
.detail span{
    margin: 0;
}
.right-arrow {
    padding-top: 0px;
    margin-top: 0px;
    margin-left: 20px;
    width: 10px;
    height: 100%;
    float: right;
    font-weight: bold;
    font-size: 20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<a href="""> Open 1st accordion </a> <br>
<a href="""> Open 2nd accordion </a>

<div class="container">
    <div class="row" id="accordion1">
        <div id="trickslist">
            <ul>
                <li>
                    <a class="expand" data-parent="#accordion1">
                        <div class="right-arrow">+</div>
                        <div>
                            <h2 class="tipstricks">Exploring your Motivations to Quit Tobacco</h2>
                        </div>
                    </a>
                    <div class="detail">
                    </div>
                </li>
                <li>
                    <a class="expand" data-parent="#accordion1">
                        <div class="right-arrow">+</div>
                        <h2 class="tipstricks">What to expect over time.</h2>
                    </a>
                    <div class="detail">
                    </div>
                </li>
                <li>
                    <a class="expand" data-parent="#accordion1">
                        <div class="right-arrow">+</div>
                        <h2 class="tipstricks">Getting Ready: Strategies to conquer urges & set a quit date</h2>
                    </a>
                    <div class="detail">
                    </div>
                </li>
                <li>
                    <a class="expand" data-parent="#accordion1">
                        <div class="right-arrow">+</div>
                        <h2 class="tipstricks">Quitting tobacco with medications</h2>
                    </a>
                    <div class="detail">
                    </div>
                </li>
                <li>
                    <a class="expand" data-parent="#accordion1">
                        <div class="right-arrow">+</div>
                        <h2 class="tipstricks">Dealing with depression or stress</h2>
                    </a>
                    <div class="detail">
                    </div>
                </li>
                <li>
                    <a class="expand" data-parent="#accordion1">
                        <div class="right-arrow">+</div>
                        <h2 class="tipstricks">Avoiding weight gain or alcohol</h2>
                    </a>
                    <div class="detail">

                    </div>
                </li>
                <li>
                    <a class="expand" data-parent="#accordion1">
                        <div class="right-arrow">+</div>
                        <h2 class="tipstricks">Making your plan stick: relapse prevention</h2>
                    </a>
                    <div class="detail">
                    </div>
                </li>
            </ul>
        </div>
    </div>
</div>

Services.html（此菜单中的每个 href 都应链接到 index.html 中的手风琴并打开它们）

<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item" >
<a class="nav-link" href="about.html">Who We Are
</a>
</li>
<li class="nav-item">
<a class="accord" href="">Our Services</a>
</li>
<li class="nav-item" id="nav">
<a href="index.html"> <img src="assets/images/name.png"/> </a>  
</li>
<li class="nav-item">
<a class="accord" href="">Our Clients</a>
</li>
<li class="nav-item">
<a class="accord" href="" >Contact Us</a>
</li>
</ul>
</div>

解决方法

将类添加到顶部标签a：

<a class="accord" href=""> Open 1st accordion </a> <br>
<a class="accord" href=""> Open 2nd accordion </a> 

接下来，使用each()方法和index参数，在这些a标签上编写点击事件的逻辑。

使用 event.preventDefault() 禁用 a 标签的默认行为。

并使用 trigger() 方法，使用带有适当 index 的 .expand 调用 eq() 类上的点击事件：

$(".expand").eq(index).trigger('click');

因此，我们得到以下代码。只需将其添加到您的主代码中即可。

$('.accord').each(function(index) {
  $(this).click(function(event) {
    event.preventDefault();
    $(".expand").eq(index).trigger('click');
  });
});

编辑：

考虑到 localStorage() 修改了 jquery 代码。

$(document).ready(function () {
    $(".expand").on("click",function () {
        $(".right-arrow").text("+");
        $(".detail:visible").slideUp();
        if (!$(this).next().is(":visible")) {
            $(this).next().slideDown(200);
            $(this).find(".right-arrow").text("-");
        }
    });

    let click_state = localStorage.getItem("click_state");
    let ind = localStorage.getItem("ind");

    if (click_state == 1) {
        $(".expand").eq(ind).trigger("click");

        localStorage.removeItem("click_state");
        localStorage.removeItem("ind");
    } else {
    }

    $(".accord").each(function (index) {
        $(this).click(function (event) {
            event.preventDefault();

            localStorage.setItem("click_state",1);
            localStorage.setItem("ind",index);
        });
    });
});

/*Tips & Tricks Page*/
*,*:before,*:after {
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box;
}

#trickslist {
    font-family: 'Open Sans',sans-serif;
    width: 80%;
    margin: 0 auto;
    display: table;
}
#trickslist ul {
    padding: 0;
    margin: 20px 0;
    color: #555;
}
#trickslist ul > li {
    list-style: none;
    border-top: 1px solid #ddd;
    display: block;
    padding: 15px;
    overflow: hidden;
    text-align: center;
}
#trickslist ul:last-child {
    border-bottom: 1px solid #ddd;
}
#trickslist ul > li:hover {
    background: #efefef;
}
.expand {
    display: block;
    text-decoration: none;
    color: #555;
    cursor: pointer;
}
.tipstricks {
    padding: 5px;
    margin: 0;
    font-size: 17px;
    font-weight: 400;
}

span {
    font-size: 12.5px;
}
#left,#right{
    display: table;
}

.detail a {
    text-decoration: none;
    color: #C0392B;
    border: 1px solid #C0392B;
    padding: 6px 10px 5px;
    font-size: 14px;
}
.detail {
    margin: 10px 0 10px 0px;
    display: none;
    line-height: 22px;
    height: 150px;
}
.detail span{
    margin: 0;
}
.right-arrow {
    padding-top: 0px;
    margin-top: 0px;
    margin-left: 20px;
    width: 10px;
    height: 100%;
    float: right;
    font-weight: bold;
    font-size: 20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<a class="accord" href=""> Open 1st accordion </a> <br>
<a class="accord" href=""> Open 2nd accordion </a>

<div class="container">
    <div class="row" id="accordion1">
        <div id="trickslist">
            <ul>
                <li>
                    <a class="expand" data-parent="#accordion1">
                        <div class="right-arrow">+</div>
                        <div>
                            <h2 class="tipstricks">Exploring your Motivations to Quit Tobacco</h2>
                        </div>
                    </a>
                    <div class="detail">
                    </div>
                </li>
                <li>
                    <a class="expand" data-parent="#accordion1">
                        <div class="right-arrow">+</div>
                        <h2 class="tipstricks">What to expect over time.</h2>
                    </a>
                    <div class="detail">
                    </div>
                </li>
                <li>
                    <a class="expand" data-parent="#accordion1">
                        <div class="right-arrow">+</div>
                        <h2 class="tipstricks">Getting Ready: Strategies to conquer urges & set a quit date</h2>
                    </a>
                    <div class="detail">
                    </div>
                </li>
                <li>
                    <a class="expand" data-parent="#accordion1">
                        <div class="right-arrow">+</div>
                        <h2 class="tipstricks">Quitting tobacco with medications</h2>
                    </a>
                    <div class="detail">
                    </div>
                </li>
                <li>
                    <a class="expand" data-parent="#accordion1">
                        <div class="right-arrow">+</div>
                        <h2 class="tipstricks">Dealing with depression or stress</h2>
                    </a>
                    <div class="detail">
                    </div>
                </li>
                <li>
                    <a class="expand" data-parent="#accordion1">
                        <div class="right-arrow">+</div>
                        <h2 class="tipstricks">Avoiding weight gain or alcohol</h2>
                    </a>
                    <div class="detail">

                    </div>
                </li>
                <li>
                    <a class="expand" data-parent="#accordion1">
                        <div class="right-arrow">+</div>
                        <h2 class="tipstricks">Making your plan stick: relapse prevention</h2>
                    </a>
                    <div class="detail">
                    </div>
                </li>
            </ul>
        </div>
    </div>
</div>