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

Question

我会 永远 如果有人可以帮我解决这个问题，我会感激...

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

我知道这可能是一个非常简单的简单的javascript / jQuery函数，但是我无法获得我尝试在Visual Composer中运行的任何函数

重要信息： 我在wordpress中使用Visual Composer。 Visual Composer允许您向元素（div）添加类，但不能添加id。 Visual Composer有一个原始的javascript＆＃34; element，a＆＃34; raw html＆＃34;元素，以及一个单独的部分来输入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）中工作，因为我的生命！我试过改变所有＃＆＃34;＃＆＃34;到＆＃34;。＆＃34;引用VC强迫我使用的类名。我试过改变所有＆＃34; $＆＃34;到＆＃34; jQuery＆＃34;当我在某处读到wordpress需要它格式化的方式。我尝试在其周围添加<script></script>标记，并调用（？）像<script src=""> ... Nada这样的函数。

Answer 1

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

对于假设，首先选择单个图像并在额外的类中输入“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;
}

结束了，现在点击图片，文本块会显示。 这是后端看。

点击之前是前端外观。

点击后，这是for-end-look。

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