0

我仍然是 jQuery 的新手，所以不要对我太苛刻。在一些帮助下，我创建了一个显示机制，现在我很难在我的 divi 网站上实现它：我在 JSfiddle 上找到了一个可以使用按钮https://jsfiddle.net/lyrus/km6guw7n/38/的工作解决方案。

现在我想用可点击的简介而不是按钮来实现代码。为了使这项工作在 divi 主题中发挥作用，我必须进行哪些更改？

function myFunction(button) {
//get the numerical value of the button selected (parse it to an int)
var buttonID = parseInt(button.className.match(/\d+/));
//get the number of btn classes
var buttonCounter = $('.btn').length;
//iterate through each of the button classes
for (let i = 1; i <= buttonCounter; i++) {
    //matches the button selected to the element class
    if (i === buttonID) {
        $('.rv_element_' + i).slideToggle();
        $('.rv_button_' + i).toggleClass('rv_button_opened rv_button_closed');
        //if the element clicked has a class name that contains "element" scroll to the button, else scroll to the extra content
        if (button.className.indexOf("element") >= 0) {
            $('html, body').animate({
                scrollTop: $(".rv_button_" + buttonID).offset().top
            }, 1500);
        }
        else {
            $('html, body').animate({
                scrollTop: $(".rv_element_" + buttonID).offset().top
            }, 1500);
        }
    }
    else {
        //hide all of the open elements
        if ($('.rv_element_' + i).css('display') != 'none') {
            $('.rv_element_' + i).slideToggle(0);
        }
        //remove the open class name
        $('.rv_button_' + i).removeClass('rv_button_opened');
    }
}
}
.flex-container {

display: flex;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-align-content: center;
-ms-flex-line-pack: center;
align-content: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}

.flex-item1 {
display: flex;
background: grey;
text-align: center;
border: black 5px solid;

margin: 20px;
width: 384px;
max-width: 512px;
height: 400px;
}

.flex-item2 {
display: flex;
background: rgb(177, 29, 29);
text-align: center;
margin: 20px;
border: black 5px solid;
width: 512px;
height: 400px;
}

.flex-item3 {
display: flex;
text-align: center;
background: rgb(160, 151, 238);
margin: 20px;
width: 250px;
height: 400px;
}

.flex-item2block {
background: rgb(238, 151, 212);
display: block;
text-align: center;
position: relative;
display: none;
width: 100vw;

height: 50vh;
}

.flex-item3block {
background: rgb(60, 62, 218);
display: block;
text-align: center;
position: relative;
display: none;
width: 100vw;

height: 50vh;
}

.btn {
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
background-color: rgba(0, 0, 255, 0);
color: black;
font-size: 16px;
padding: 12px 24px;
border: none;
cursor: pointer;
border-radius: 5px;
text-align: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section>
<div class="flex-container">


    <div class="flex-item2">
        <button class="rv_button_1 rv_button_closed btn" onclick="myFunction(this)">Click Me</button>
    </div>
    <div class="rv_element rv_element_1 flex-item2block" onclick="myFunction(this)">grid-item2block</div>

    <div class="flex-item1">
        <button class="rv_button_2 rv_button_closed btn" onclick="myFunction(this)">Click Me</button>
    </div>
    <div class="rv_element rv_element_2 flex-item2block" onclick="myFunction(this)">grid-item2block</div>

    <div class="flex-item3">
        <button class="rv_button_3 rv_button_closed btn" onclick="myFunction(this)">Click Me</button>
    </div>
    <div class="rv_element rv_element_3 flex-item2block" onclick="myFunction(this)">grid-item2block</div>

    <div class="flex-item2">
        <button class="rv_button_4 rv_button_closed btn" onclick="myFunction(this)">Click Me</button>
    </div>
    <div class="rv_element rv_element_4 flex-item2block" onclick="myFunction(this)">grid-item2block</div>

    <div class="flex-item2">
        <button class="rv_button_5 rv_button_closed btn" onclick="myFunction(this)">Click Me</button>
    </div>
    <div class="rv_element rv_element_5 flex-item2block" onclick="myFunction(this)">grid-item2block</div>

    <div class="flex-item1">
        <button class="rv_button_6 rv_button_closed btn" onclick="myFunction(this)">Click Me</button>
    </div>
    <div class="rv_element rv_element_6 flex-item2block" onclick="myFunction(this)">grid-item2block</div>



    <div class="flex-item3">
        <button class="rv_button_7 rv_button_closed btn" onclick="myFunction(this)">Click Me</button>
    </div>
    <div class="rv_element rv_element_7 flex-item2block" onclick="myFunction(this)">grid-item3block</div>


    <div class="flex-item2">
        <button class="rv_button_8 rv_button_closed btn" onclick="myFunction(this)">Click Me</button>
    </div>
    <div class="rv_element rv_element_8 flex-item2block" onclick="myFunction(this)">grid-item2block</div>


</div>
</section>

我将非常感谢有关如何更改代码以使其在 divi 主题中工作的一些想法。

提前感谢您的帮助！

4

0 回答 0