在WordPress网站中显示/隐藏div

Question

您好我正在尝试使用带有divi主题的WordPress网站中的按钮显示/隐藏div。但我有一个问题是我的代码在该主题的html结构中不能很好地工作。当我单击上一个按钮，然后单击页面最后一部分中的按钮时，滚动将转到选项卡的末尾。

我有按钮class: button和标签class: tab。

Jquery代码

jQuery(document).ready(function( $ ){

$(".button").on("click", function(e){
var posBut = $(".button").index(this),
tab = $(".tab").eq(posBut),
aux;
e.preventDefault(); 

if ((aux = $(".visible")))
{ // If there is an element with the class "visible"
aux.removeClass("visible").slideToggle("slow"); // I take it off and the hidden
$('.button').toggleClass('opened closed');
alert("Toogle1.");
}

if (aux[0] != tab[0])
{ // If the element equivalent to the button pressed is different from the 
one that has the class "visible"
tab.addClass("visible").slideToggle("slow"); // I assign this class
$('.button').toggleClass('opened closed'); 
alert("Toogle2");
}

});
});

HTML结构

 <div id="main-content">
 <article id="post-30979" class="post-30979 page type-page status-publish 
 hentry">
<div class="entry-content">
<div class="et_pb_section et_pb_section_0 et_pb_with_background et_pb_section_parallax et_section_regular">
<div class="et_parallax_bg et_pb_parallax_css" style="background-image: url(http://www.viajaydescubre.com/wp-content/uploads/2018/02/Fondo.jpg);"></div>
<div class=" et_pb_row et_pb_row_0">
<div class="et_pb_column et_pb_column_4_4  et_pb_column_0 et_pb_css_mix_blend_mode_passthrough et-last-child">


<div class="et_pb_code et_pb_module  et_pb_code_0">


<div class="et_pb_code_inner">



</div> <!-- .et_pb_code_inner -->
</div> <!-- .et_pb_code -->
</div> <!-- .et_pb_column -->


</div> <!-- .et_pb_row --><div class="12 et_pb_row et_pb_row_1">
<div class="et_pb_column et_pb_column_1_2  et_pb_column_1 et_pb_css_mix_blend_mode_passthrough">


<div class="et_pb_button_module_wrapper et_pb_module et_pb_button_alignment_center">
<a class="et_pb_button et_pb_custom_button_icon button closed et_pb_button_0 et_pb_module et_pb_bg_layout_light" href="" data-icon="&#x3b;">Ver Mas</a>
</div><div class="et_pb_module et_pb_tabs tab et_pb_tabs_0">


<ul class="et_pb_tabs_controls clearfix">
<li class="et_pb_tab_0 et_pb_tab_active"><a href="#">Title1</a></li>
</ul>
<div class="et_pb_all_tabs">
<div class="et_pb_tab clearfix et_pb_active_content et_pb_tab_0">


<div class="et_pb_tab_content">
<p>Title1 Example</p>
</div><!-- .et_pb_tab_content" -->
</div> <!-- .et_pb_tab -->
</div> <!-- .et_pb_all_tabs -->
</div> <!-- .et_pb_tabs -->
</div> <!-- .et_pb_column --><div class="et_pb_column et_pb_column_1_2  et_pb_column_2 et_pb_css_mix_blend_mode_passthrough et-last-child">


<div class="et_pb_button_module_wrapper et_pb_module et_pb_button_alignment_center">
<a class="et_pb_button et_pb_custom_button_icon button closed et_pb_button_1 et_pb_module et_pb_bg_layout_light" href="" data-icon="&#x3b;">Ver Mas</a>
</div><div class="et_pb_module et_pb_tabs tab et_pb_tabs_1">


<ul class="et_pb_tabs_controls clearfix">
<li class="et_pb_tab_1 et_pb_tab_active"><a href="#">Test2</a></li>
</ul>
<div class="et_pb_all_tabs">
<div class="et_pb_tab clearfix et_pb_active_content et_pb_tab_1">


<div class="et_pb_tab_content">
<p>Test2 Info</p>
</div><!-- .et_pb_tab_content" -->
</div> <!-- .et_pb_tab -->
</div> <!-- .et_pb_all_tabs -->
</div> <!-- .et_pb_tabs -->
</div> <!-- .et_pb_column -->


</div> <!-- .et_pb_row --><div class="12 et_pb_row et_pb_row_2">
<div class="et_pb_column et_pb_column_1_2  et_pb_column_3 et_pb_css_mix_blend_mode_passthrough">


<div class="et_pb_button_module_wrapper et_pb_module et_pb_button_alignment_center">
<a class="et_pb_button et_pb_custom_button_icon button closed et_pb_button_2 et_pb_module et_pb_bg_layout_light" href="" data-icon="&#x3b;">Ver Mas</a>
</div><div class="et_pb_module et_pb_tabs tab et_pb_tabs_2">


<ul class="et_pb_tabs_controls clearfix">
<li class="et_pb_tab_2 et_pb_tab_active"><a href="#">Test3</a></li>
</ul>
<div class="et_pb_all_tabs">
<div class="et_pb_tab clearfix et_pb_active_content et_pb_tab_2">


<div class="et_pb_tab_content">
<p>Test3 Info</p>
</div><!-- .et_pb_tab_content" -->
</div> <!-- .et_pb_tab -->
</div> <!-- .et_pb_all_tabs -->
</div> <!-- .et_pb_tabs -->
</div> <!-- .et_pb_column --><div class="et_pb_column et_pb_column_1_2  et_pb_column_4 et_pb_css_mix_blend_mode_passthrough et-last-child">


<div class="et_pb_button_module_wrapper et_pb_module et_pb_button_alignment_center">
<a class="et_pb_button et_pb_custom_button_icon button closed et_pb_button_3 et_pb_module et_pb_bg_layout_light" href="" data-icon="&#x3b;">Ver Mas</a>
</div><div class="et_pb_module et_pb_tabs tab et_pb_tabs_3">


<ul class="et_pb_tabs_controls clearfix">
<li class="et_pb_tab_3 et_pb_tab_active"><a href="#">Test4</a></li>
</ul>
<div class="et_pb_all_tabs">
<div class="et_pb_tab clearfix et_pb_active_content et_pb_tab_3">


<div class="et_pb_tab_content">
<p>Test4 Info</p>
</div><!-- .et_pb_tab_content" -->
</div> <!-- .et_pb_tab -->
</div> <!-- .et_pb_all_tabs -->
</div> <!-- .et_pb_tabs -->
</div> <!-- .et_pb_column -->


</div> <!-- .et_pb_row --><div class="12 et_pb_row et_pb_row_3">
<div class="et_pb_column et_pb_column_1_2  et_pb_column_5 et_pb_css_mix_blend_mode_passthrough">


<div class="et_pb_button_module_wrapper et_pb_module et_pb_button_alignment_center">
<a class="et_pb_button et_pb_custom_button_icon button closed et_pb_button_4 et_pb_module et_pb_bg_layout_light" href="" data-icon="&#x3b;">Ver Mas</a>
</div><div class="et_pb_module et_pb_tabs tab et_pb_tabs_4">


<ul class="et_pb_tabs_controls clearfix">
<li class="et_pb_tab_4 et_pb_tab_active"><a href="#">Test5</a></li>
</ul>
<div class="et_pb_all_tabs">
<div class="et_pb_tab clearfix et_pb_active_content et_pb_tab_4">


<div class="et_pb_tab_content">
<p>Test5Info</p>
</div><!-- .et_pb_tab_content" -->
</div> <!-- .et_pb_tab -->
</div> <!-- .et_pb_all_tabs -->
</div> <!-- .et_pb_tabs -->
</div> <!-- .et_pb_column --><div class="et_pb_column et_pb_column_1_2  et_pb_column_6 et_pb_css_mix_blend_mode_passthrough et-last-child">


<div class="et_pb_button_module_wrapper et_pb_module et_pb_button_alignment_center">
<a class="et_pb_button et_pb_custom_button_icon button closed et_pb_button_5 et_pb_module et_pb_bg_layout_light" href="" data-icon="&#x3b;">Ver Mas</a>
</div><div class="et_pb_module et_pb_tabs tab et_pb_tabs_5">


<ul class="et_pb_tabs_controls clearfix">
<li class="et_pb_tab_5 et_pb_tab_active"><a href="#">Test6</a></li>
</ul>
<div class="et_pb_all_tabs">
<div class="et_pb_tab clearfix et_pb_active_content et_pb_tab_5">


<div class="et_pb_tab_content">
<p>Test6 Info</p>
</div><!-- .et_pb_tab_content" -->
</div> <!-- .et_pb_tab -->
</div> <!-- .et_pb_all_tabs -->
</div> <!-- .et_pb_tabs -->
</div> <!-- .et_pb_column -->


</div> <!-- .et_pb_row --><div class="12 et_pb_row et_pb_row_4">
<div class="et_pb_column et_pb_column_1_2  et_pb_column_7 et_pb_css_mix_blend_mode_passthrough">


<div class="et_pb_button_module_wrapper et_pb_module et_pb_button_alignment_center">
<a class="et_pb_button et_pb_custom_button_icon button closed et_pb_button_6 et_pb_module et_pb_bg_layout_light" href="" data-icon="&#x3b;">Ver Mas</a>
</div><div class="et_pb_module et_pb_tabs tab et_pb_tabs_6">


<ul class="et_pb_tabs_controls clearfix">
<li class="et_pb_tab_6 et_pb_tab_active"><a href="#">Test7</a></li>
</ul>
<div class="et_pb_all_tabs">
<div class="et_pb_tab clearfix et_pb_active_content et_pb_tab_6">


<div class="et_pb_tab_content">
<p>Test7 Info</p>
</div><!-- .et_pb_tab_content" -->
</div> <!-- .et_pb_tab -->
</div> <!-- .et_pb_all_tabs -->
</div> <!-- .et_pb_tabs -->
</div> <!-- .et_pb_column --><div class="et_pb_column et_pb_column_1_2  et_pb_column_8 et_pb_css_mix_blend_mode_passthrough et-last-child">


<div class="et_pb_button_module_wrapper et_pb_module et_pb_button_alignment_center">
<a class="et_pb_button et_pb_custom_button_icon button closed et_pb_button_7 et_pb_module et_pb_bg_layout_light" href="" data-icon="&#x3b;">Ver Mas</a>
</div><div class="et_pb_module et_pb_tabs tab et_pb_tabs_7">


<ul class="et_pb_tabs_controls clearfix">
<li class="et_pb_tab_7 et_pb_tab_active"><a href="#">Test8</a></li>
</ul>
<div class="et_pb_all_tabs">
<div class="et_pb_tab clearfix et_pb_active_content et_pb_tab_7">


<div class="et_pb_tab_content">
<p>Test8Info</p>
</div><!-- .et_pb_tab_content" -->
</div> <!-- .et_pb_tab -->
</div> <!-- .et_pb_all_tabs -->
</div> <!-- .et_pb_tabs -->
</div> <!-- .et_pb_column -->


</div> <!-- .et_pb_row -->


</div> <!-- .et_pb_section -->                  </div> <!-- .entry-content -->


</article> <!-- .et_pb_post -->

演示：jsfiddle

页面：Page

问题视频：Problem video

Answer 1

试试这个：

jQuery(document).ready(function( $ ){

// DOM selector for the column that wraps each .button and .tab
var col_sel = '.et_pb_column';

$( col_sel ).on("click", '.button', function(e){
 var $btn = $( this ), // The current/clicked button.
 tab = $btn.closest( col_sel ).find(".tab"), // The target tab.
 aux, tmp;
 e.preventDefault(); 

 if (aux = $(".tab.visible", col_sel))
 { // Here we close the last/currently opened tab.
 tmp = function() { alert( 'The last opened tab has been closed.' ); }; // Demo stuff. Remove this after done testing.
 aux.removeClass("visible").slideToggle("slow", tmp); // I take it off and the hidden. Remove 'tmp' after done testing.
 aux.closest( col_sel ).find('.button').toggleClass('opened closed');
 }

if (aux[0] != tab[0])
 { // Here we open or close the target/current tab.
 tmp = function() { var s = $( this ).is( ':visible' ) ? 'opened' : 'closed'; alert( 'The target tab has been ' + s + '.' ); }; // Demo stuff. Remove this after done testing.
 tab.addClass("visible").slideToggle("slow", tmp); // I assign this class. Remove 'tmp' after done testing.
 $btn.toggleClass('opened closed');
 }

});
});

Demo on JSFiddle