Wordpress/Visual Composer - 单击另一个 div 时显示 1 div

Question

如果有人能帮助我解决这个问题，我将永远感激...

我已经尝试实现此功能 4 天了，不是开玩笑..我到处研究，尝试了一切，我终于承认我被打败了。

我知道这可能是一个 难以置信的 简单的 javascript/jQuery 函数，但我无法获得我尝试在 Visual Composer 中使用的任何函数

重要信息： 我在 wordpress 中使用 Visual Composer。 Visual Composer 允许您将 classes 添加到元素 (divs)，但不能添加 id。 Visual Composer 有一个 "raw javascript" 元素、一个 "raw html" 元素和一个单独的部分来输入 CSS.

设置： 我有两张图片（div Aa 和 Ab），它们是指向页面单独部分的链接。我也有两段内容（div Ba和Bb）。

我想做什么： div Aa 和 Ab 应该默认隐藏。当点击 div Aa 时，Ba 出现，Bb 隐藏。当点击 div Ab 时，Bb 出现，Ba 隐藏。如果 Bb 已经可见，点击 Aa，Bb 消失，Ba 出现，反之亦然

我已经非常接近这个脚本了：

HTML

<div id="Aa">Image #1</div>
<div id="Ab">Hidden Content #1</div>
<div id="Ba">Image #2</div>
<div id="Bb">Hidden Content #2</div>

CSS

#Ab{display:none;}
#Bb{display:none;}

Javascript

$('#Aa').click(function() {
$('#Ab').show();
});

$('#Ba').click(function() {
$('#Bb').show();
});

但是，我一辈子都无法在 Visual Composer (VC) 中使用它！我试过将所有“#”更改为“。”引用 class 名称 VC 迫使我使用。我试过将所有“$”更改为 "jQuery"，因为我在某处读到 wordpress 需要以这种方式格式化。我尝试在它周围添加 <script></script> 标签，并调用（？）函数，例如 <script src="">... Nada.

Answer 1

您可以在视觉编辑器中使用 css id in row or inner。那么，您可以在额外 class 元素或内部列下的元素中使用 class。

假设，首先你 select 单个图像并在额外的 class 中键入 "Aa"（没有引号也没有“.”句点），如下图所示：

现在 select 另一个元素文本块并键入 class "Ab"，创建另外两个元素或复制粘贴并更改 classes "Ba"， "Bb" 反之亦然。

现在您有四个元素，两个单个图像和两个文本块。从结构选项卡中再添加一个元素 Raw JS 并粘贴以下 jquery 代码。

<script>
jQuery(document).ready(function(){
 jQuery('.Aa').click(function() {
    jQuery('.Ab').show();
});
 jQuery('.Ba').click(function() {
    jQuery('.Bb').show();
});
});
</script>

将 CSS 添加到可视化编辑器，单击顶部的齿轮图标。（见图）：

在下面粘贴 css 代码：

.Ab,
.Bb {
    display: none;
}

.Aa,
.Ba {
    cursor: pointer;
}

到此结束，现在您点击图片，将显示文本块。这是back-end看。

这里是front-end点击前先看一下。

这里是fornt-end点击后的样子

还有其他方法可以实现，使用wp_enqueue_script和wp_equeue_style钩子在wordpress中添加js和css。希望对你有帮助。

Wordpress/Visual Composer - 单击另一个 div 时显示 1 div

Wordpress/Visual Composer - Show 1 div when another div is clicked

css

wordpress

jquery

show

visual-composer