1

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

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

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

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

4

1 回答 1

2

您可以在可视化作曲家的行或内部使用 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。希望，这对你有帮助。

于 2017-02-04T21:22:48.550 回答