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

Posted 2023-02-19

【中文标题】Wordpress/Visual Composer - 单击另一个 div 时显示 1 个 div

【英文标题】：Wordpress/Visual Composer - Show 1 div when another div is clicked

【发布时间】：2017-06-21 17:48:52

【问题描述】：

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

我已经尝试实现这个功能 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

#Abdisplay:none;
#Bbdisplay:none;

Javascript

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

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

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

【参考方案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。 希望对您有所帮助。

【讨论】：

我明白你在这里想要做什么，但脚本不会触发。我试着按照你的建议来实现它，不得不稍微改变一下，因为你的 CSS 导致图像和文本默认都被隐藏了。此外， display: none 属性不起作用，我不得不使用 visibility: hidden。你认为我的插件可能有问题吗？？

@JipJipJimmy 我这边工作正常，这很实用。请检查浏览器的控制台日志。我的 CSS 没有隐藏图像和文本，两者都是单独的类，请确保您在元素或列/行上使用 css 类。我在每个元素中使用类。

赖我发现问题了！！！我有一个名为 One Page 的 VC 扩展程序，它允许您“命名”行并选择这些名称作为元素的“单击”操作，因此当单击时，页面会平滑地向下滚动到所需的行。当我在图像上实现此功能时，您的脚本不起作用（与 onclick 代码冲突？）。但是，对于我正在尝试做的事情，我需要滚动，因为当单击 Aa 图像时，页面应该滚动到并显示 Ba，反之亦然 Bb。当单击另一个时，我还需要隐藏的替代方法。无论如何，您可以进一步帮助我吗？？

我做到了！！！我得到了我想要工作的全部功能。我将您的代码与“动画/滚动顶部”代码拼凑在一起，并一起删除了 OnePage 扩展。非常感谢您的帮助！！！