首页 / 技术问答 / Javascript问答列表 / 问答详情

Javascript 仅在单击按钮时切换 div

jQuery新手，我希望有人能帮上忙.

我有一个函数，当单击一个类为.ventures-minorities的div时，它会将高度onclick更改为show/hide .logos-wrapper，而带有类.expander的按钮会相应地将文本切换为"Learn more"到"Close".

按钮和div按预期工作和切换，但如何使.logos-wrapper只在单击.expander按钮时出现？

现在，当我点击它周围的任何地方时，.logos-wrapper容器都可以切换，这可能与onclick的目标.ventures-minorities容器有关，但我不知道如何在点击.expander按钮时使.logos-wrapper切换only when.

这是一个问题，因为当在按钮外单击div时，它会切换，但按钮文本不会切换.我不确定如何将这两者联系在一起.

(function($) {
  $(document).ready(function() {

    $('.expander .elementor-button-text').on('click', function() {
      if ($.trim($(this).text()) == 'Learn more') {
        $(this).text('Close');
      } 
      else {
        $(this).text('Learn more');
      }
    });

    $(".ventures-minorities").on('click', function() {
      $(this).find(".logos-wrapper").toggleClass("sized");
    });

  });
})(jQuery);
.logos-wrapper {
  height: 0;
  opacity: 0;
  transition: all 0.35s ease-in-out;
}

.sized {
  height: auto;
  opacity: 1;
  transition: all 0.35s ease-in-out;
}

.ventures-minorities {
  padding: 50px 0;
}

button {
  width: 150px;
  height: 50px;
  background-color: darkslateblue;
  border-radius: 10px;
  color: #fff;
  font-size: 18px;
  font-family: "Roboto";
  border: none;
  letter-spacing: 1px;
}

button:hover {
  background-color: tomato;
  color: #000;
}

button:active {
  background-color: green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="ventures-minorities">
  <button class="expander">
    <span class="elementor-button-text">Learn more</span>
  </button>

  <div class="logos-wrapper">content</div>
</div>

<div class="ventures-minorities">
  <button class="expander">
    <span class="elementor-button-text">Learn more</span>
  </button>

  <div class="logos-wrapper">content</div>
</div>

推荐答案

您可以简单地为按钮.expander而不是父容器.ventures-minorities定义事件侦听器.

为了使切换生效，您需要在找到.logos-wrapper之前使用方法parent()，因为$(this)现在是按钮，.ventures-minorities的子元素:

$(this).parent().find(".logos-wrapper").toggleClass("sized");

Working example:

(function($) {
  $(document).ready(function() {

    $('.expander .elementor-button-text').on('click', function() {
      if ($.trim($(this).text()) == 'Learn more') {
        $(this).text('Close');
      } 
      else {
        $(this).text('Learn more');
      }
    });

    $(".expander").on('click', function() {
      $(this).parent().find(".logos-wrapper").toggleClass("sized");
    });

  });
})(jQuery);
.logos-wrapper {
  height: 0;
  opacity: 0;
  transition: all 0.35s ease-in-out;
}

.sized {
  height: auto;
  opacity: 1;
  transition: all 0.35s ease-in-out;
}

.ventures-minorities {
  padding: 50px 0;
}

button {
  width: 150px;
  height: 50px;
  background-color: darkslateblue;
  border-radius: 10px;
  color: #fff;
  font-size: 18px;
  font-family: "Roboto";
  border: none;
  letter-spacing: 1px;
}

button:hover {
  background-color: tomato;
  color: #000;
}

button:active {
  background-color: green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="ventures-minorities">
  <button class="expander">
    <span class="elementor-button-text">Learn more</span>
  </button>
  
  <div class="logos-wrapper">content</div>
</div>

<div class="ventures-minorities">
  <button class="expander">
    <span class="elementor-button-text">Learn more</span>
  </button>
  
  <div class="logos-wrapper">content</div>
</div>

在这种情况下，您可以组合这两个事件侦听器.

要使文本交换正常工作，您必须将保存文本的跨度设置为find()，最多使用一个单独的var，以防止重复:

$('.expander').on('click', function() {
  const text_span = $(this).find(".elementor-button-text");
      
  if ($.trim(text_span.text()) == 'Learn more') {...

Working example:

(function($) {
  $(document).ready(function() {

    $('.expander').on('click', function() {
      const text_span = $(this).find(".elementor-button-text");
      
      if ($.trim(text_span.text()) == 'Learn more') {
        text_span.text('Close');
      } 
      else {
        text_span.text('Learn more');
      }
      
      $(this).parent().find(".logos-wrapper").toggleClass("sized");
    });

  });
})(jQuery);
.logos-wrapper {
  height: 0;
  opacity: 0;
  transition: all 0.35s ease-in-out;
}

.sized {
  height: auto;
  opacity: 1;
  transition: all 0.35s ease-in-out;
}

.ventures-minorities {
  padding: 50px 0;
}

button {
  width: 150px;
  height: 50px;
  background-color: darkslateblue;
  border-radius: 10px;
  color: #fff;
  font-size: 18px;
  font-family: "Roboto";
  border: none;
  letter-spacing: 1px;
}

button:hover {
  background-color: tomato;
  color: #000;
}

button:active {
  background-color: green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="ventures-minorities">
  <button class="expander">
    <span class="elementor-button-text">Learn more</span>
  </button>
  
  <div class="logos-wrapper">content</div>
</div>

<div class="ventures-minorities">
  <button class="expander">
    <span class="elementor-button-text">Learn more</span>
  </button>
  
  <div class="logos-wrapper">content</div>
</div>

Javascript相关问答推荐

使用useup时，React-Redux无法找到Redux上下文值

每次子路由重定向都会调用父加载器函数

Plotly热图：在矩形上zoom 后将zoom 区域居中

类型自定义lazy Promise. all

未捕获错误：在注销后重定向到/login页面时找不到匹配的路由

微软Edge编辑和重新发送未显示""

PrivateRoute不是路由组件错误

在观察框架中搜索CSV数据

用JavaScript复制C#CRC 32生成器

函数返回与输入对象具有相同键的对象

Promise Chain中的第二个useState不更新

将旋转的矩形zoom 到覆盖它所需的最小尺寸&S容器

在HTML语言中调用外部JavaScript文件中的函数

如何将数组用作复合函数参数？

400 bad request error posting through node-fetch

Rxjs流中生成IMMER不能在对象上操作

第一项杀死下一项，直到数组长度在javascript中等于1

将Auth0用户对象存储在nextjs类型脚本的Reaction上下文中

postman 预请求中的hmac/sha256内标识-从js示例转换

使用Library chart.js在一个带有两个y轴的图表中绘制两个数据集

实用课程推荐
相关教程推荐
休闲君评测 |  TOOLFK工具网 |  chrome插件网 |  古诗文网 |  良许Linux教程网 |  Python之禅 |  红色石头 |  豪评测 |  入党申请书 | 

© 2020 Hi LearnFk 意见反馈 免责声明 关于我们 桂ICP备11002319号-3 友链&广告位+QQ: 1963612630