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

Question

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

我已经尝试实现这个功能 4 天了，不是开玩笑。我到处研究，尝试了一切，我终于接受了我失败了。

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

重要信息： 我在 wordpress 中使用 Visual Composer。 Visual Composer 允许您向元素（div）添加类，但不能向 id 添加类。 Visual Composer 有一个“原始 javascript”元素、一个“原始 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) 中工作！我尝试将所有“#”更改为“。”引用类名 VC 强迫我使用。当我在某处阅读 wordpress 需要以这种方式格式化时，我尝试将所有“$”更改为“jQuery”。我尝试在它周围添加<script></script> 标签，并调用（？）函数，如<script src="">... Nada。

Answer 1

您可以在可视化作曲家中的行或内部使用 css id。 好吧，你可以在额外的类元素或内列下的元素中使用类。

假设，首先您选择单个图像并在额外的类中键入“Aa”（不带引号以及不带“.”句点），如下图所示：

现在选择另一个元素文本块并键入类“Ab”，创建另外两个元素或复制粘贴并更改类“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;
}

到此结束，现在您单击图像，将显示文本块。 这是后端外观。

这是点击前的前端外观。

这是点击后的前端查看。

还有其他方法来完成，使用 wp_enqueue_script 和 wp_equeue_style 钩子在 wordpress 中添加 js 和 css。 希望对您有所帮助。