个人中心
gpt4 book ai didi

javascript - 激活后保持可折叠图标显示

转载 作者：行者123 更新时间：2023-11-30 06:11:14 24 4
gpt4 key购买 nike

我正在尝试制作一个可折叠的，打开时箭头从右向变为向下。我拥有的代码几乎可以满足我的要求，但是当我单击打开可折叠图标时，图标会发生变化，然后在我抬起鼠标时立即返回到右侧。我需要它保持朝下，直到我再次点击关闭折叠器。这是我的代码:

<body>

<script>
$(document).ready(function(){
  $(".collapsible-body").hide();
    $(".collapsible-header").click(function(){
    $(this).next(".collapsible-body").slideToggle("normal");
    });
});
</script>

<style>

    .collapsible-header {
        display:inline-block;
        justify-content: space-between;
        vertical-align: middle;
        width: 95.8%;
        margin-bottom: 2%;
        padding: 15px;
        -ms-touch-action: manipulation;
        touch-action: manipulation;
        cursor: pointer;
        background-image: none;
        font-size: 14px;
        font-weight:500;
        line-height:1.4;
        white-space:nowrap;
        webkit-user-select:none;
        -moz-user-select:none;
        -ms-user-select:none;
        user-select:none;
        color:#333;
        background-color:#e8e8e8;
    }

    .collapsible-header:after {
        font-family: 'fontawesome';
        content: "\f054";
        float: left;
        font-size: .70em;
        vertical-align: middle;
        margin-right: 10px;
        display: inline-block;
        line-height: 1.5em;
        margin-top: 4.2px;
    }

    .collapsible-header:active:after {
        font-family: 'fontawesome';
        content: "\f078";
        float: left;
        font-size: .70em;
        vertical-align: middle;
        margin-right: 10px;
        display: inline-block;
        line-height: 1.556em;
    }

    .collapsible-header.focus,
    .collapsible-header:focus {
        color:#333;
        background: #d8d8d8 !important;
        }

    .active, .collapsible-header:hover {
        color:#333;
        background: #d8d8d8;
    }

    ul.collapsible {
        list-style-type:none;
        padding-inline-start: 0;
    }

    .collapsible-body {
        text-align:left;
        padding-top: 2%;
        padding-bottom: 2%;
        border-bottom: 1px solid #e8e8e8;
        border-left: 1px solid #e8e8e8;
        border-right: 1px solid #e8e8e8;
        margin-bottom: 2%;
    }

    .collapsible-body p {
        margin-left: 1.5%;
        margin-right: 1.5%;
    }

    </style>

    <h3>Delivering Relevant Tools and Resources</h3>
    <p>Our key strength is providing an avenue for bringing together scientific information and technical research on cereal grains and related materials through its various resources. Members belong to Cereals & Grains Association to keep up-to-date on key issues through meetings and publications as well as to have opportunities for professional growth and networking with their peers. Key offerings include:</p>
    <br/>
    <ul class="collapsible">
        <li>
            <div class="collapsible-header">Cereal Chemistry</div>
            <div class="collapsible-body"><p>Cereal Chemistry, a journal with peer-reviewed, original research on raw materials, processes, and products utilizing cereals, oilseeds, and pulses as well as analytical procedures and methods in the cereals area. No other journal surpasses it in the quantity and quality of juried, original research.</p></div>
        </li>

        <li>
            <div class="collapsible-header">Cereal Foods World (CFW)</div>
            <div class="collapsible-body"><p>Cereal Foods World (CFW) include feature articles and original research in a multimedia environment that focuses on advances in grain-based food science and the application of these advances on current practices in baking, snack foods, breakfast foods, and other grain-based products.</p></div>
        </li>

        <li>
            <div class="collapsible-header">Cereals & Grains Association Books</div>
            <div class="collapsible-body"><p>Cereals & Grains Association offers more than 65 titles on various food science topics plus the highly respected <i>AACC Approved Methods of Analysis, 11th Edition</i>. Some titles are technically focused while others are designed for generalists.</p></div>
        </li>

        <li>
            <div class="collapsible-header">Annual Meeting</div>
            <div class="collapsible-body"><p>The Annual Meeting draws an international audience of more than 1,000 grain-based professionals to discuss key grain science issues. The annual meeting is the primary education and networking event for professionals working in the grain-based foods industry around the world. The annual meeting also features a tradeshow composed of more than 250 exhibits.</p></div></LI>

      <li>
            <div class="collapsible-header">Continuing Education</div>
            <div class="collapsible-body"><p><p>Continuing education programs offer quality professional development services for food industry professionals at any level in a variety of food-related industries. Courses are designed to increase skills and broaden understanding of grain-based applications.</p></div>
        </li>

        <li>
            <div class="collapsible-header">Website</div>
            <div class="collapsible-body"><p>Our website (<a href="www.cerealsgrains.org">www.cerealsgrains.org</a>) offers members the opportunity to obtain information and resources in one common location. The website features more than 40 years of searchable <I>Cereal Chemistry </I>abstracts, an online catalog of books, special reports, calendar of events, online symposia, and a searchable directory is always available to find members by geographic region or area of expertise.</p></div></LI>

        <li>
            <div class="collapsible-header">Technical and Administrative Committees</div>
            <div class="collapsible-body"><p>Our members work together on various initiatives through technical and administrative committees. Committee participants help identify emerging issues and create definitions for critical industry ingredients, as well as investigate and validate analytical methodology.</p></div>
        </li>

    </ul>

</body>

最佳答案

除了使用伪类来定义不同的图标，您还可以切换标题的类，并在该类中定义特殊外观。

所以这门课

.collapsible-header:active:after {...}

成为

.collapsible-header.open {...}

和

$(".collapsible-header").click(function(){
    $(this).next(".collapsible-body").slideToggle("normal");
});

成为

$(".collapsible-header").click(function(){
    $(this).next(".collapsible-body").slideToggle("normal");
    $(this).toggleClass("open");
});

关于javascript - 激活后保持可折叠图标显示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58843108/

24 4 0
文章推荐： javascript - 如何将onload事件添加到div元素
文章推荐： javascript - 处理大数据时的json.parse函数
文章推荐： javascript - 在 v-for 循环中定位特定索引
文章推荐： javascript - 检查一个数组是否包含 JavaScript 中另一个数组的任何元素
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com