通过不同的点击控制jQuery元素

Question

描述

我有一个包含主题和布局选项的屏幕外元素。另外，我有一个复选框滑块元素，允许显示屏幕外元素。我正在使用 jquery 来处理和监视点击事件。

目标

1. 单击复选框滑块时显示/隐藏屏幕外元素。
2. 单击时复选框滑块左/右移动以进行视觉显示。
3. 如果用户点击离屏元素之外的任意位置，则使离屏元素自动隐藏。
4. 如果用户单击离屏元素之外，或单击复选框滑块（显示离屏元素），则离屏元素不仅会隐藏，而且复选框滑块也会恢复到其默认关闭位置。

HTML

屏幕外元素

    <!-- Offscreen -->
    <div id="offscreen-container" class="panel">
      <h2>Layouts</h2>
      <select name="layout-toggle" id="layout-toggle" class="dropdown">
        <optgroup label="Default Layout Styles">
          <optgroup label="--Default Border Style">
            <hr>
            <option value="normal.square.border_full.page_full" id="layout-1">Full - Square</option>
          </optgroup>
          <hr>
          <optgroup label="--Alternate Border Style">
            <hr>
            <option value="normal.square.border_alt.page_full" id="layout-7">Full - Square</option>
          </optgroup>
        </optgroup>
        <option disabled="true"></option>
        <hr>
        <optgroup label="Reversed Layout Styles">
          <optgroup label="--Default Border Style">
            <hr>
            <option value="reversed.square.border_full.page_full" id="layout-13">Full - Square</option>
          </optgroup>
          <hr>
          <optgroup label="--Alternate Border Style">
            <hr>
            <option value="reversed.square.border_alt.page_full" id="layout-19">Full - Square</option>
          </optgroup>
        </optgroup>
      </select>
      <h2>Themes</h2>
      <select name="theme-toggle" id="theme-toggle" class="dropdown">
        <option value="jldn" id="jldn">JLDN</option>
        <option value="dark" id="dark">Dark</option>
        <option value="light" id="light">Light</option>
      </select>
      {% yield offscreen %}
    </div>
    <!-- /Offscreen -->

复选框滑块

    <!-- footer -->
    <footer class="panel">
      {% yield footer %}
      <label class="switch tooltip top" data-tooltip="Themes &amp; Layouts">
        <input id="offscreen-toggle" type="checkbox">
        <span class="slider round"></span>
      </label>
    </footer>
    <!-- /footer -->

jQuery

复选框滑块点击事件

        var offscreenToggle = $('#offscreen-toggle');
        var offscreenContainer = $('#offscreen-container');

        offscreenToggle.on('click', () => {
          let rInt = Math.floor(Math.random() * (3 - 1 + 1) + 1);
          
          switch (rInt) {
            default:
            case 1:
              offscreenContainer.toggle(1000);
              break;
            case 2:
              offscreenContainer.fadeToggle(1000);
              break;
            case 3:
              offscreenContainer.slideToggle(1000);
              break;
          }
        });

自动隐藏点击事件

      $(document).on('click', (e) => {
        let t = $(e.target);

        if (!t.is('#offscreen-container,#offscreen-container *')) {
          offscreenContainer.hide();
        }
      });

我已经尝试过了

我已经分别实现了这两个目标。但是，当我输入脚本来执行这两项操作时，它失败了。基本上，我可以做其中之一。

复选框滑块单击事件效果完美。当我添加自动隐藏单击事件时，事情变得有点奇怪。例如，复选框滑块在视觉上起作用，但屏幕外元素永远不会显示。如果我将屏幕外元素设置为在页面加载时显示，则自动隐藏单击事件将起作用，但不会将复选框滑块恢复到关闭位置。

我什至尝试在“if”条件下将复选框滑块单击事件与自动隐藏单击事件结合起来以指导事件处理......但它仍然不起作用。不知道在这里做什么。

更新

---

jQuery

      $(document).on('click', (e) => {
        let t = $(e.target);

        // outside of offscreen container, but not the switch
        if (!t.is('#offscreen-container,#offscreen-container *') && !t.is('#offscreen-toggle')) {
          offscreenContainer.hide(1000);
          offscreenToggle.prop('checked', false);
        } else

        // outside of offscreen container, specifically the switch
        if (!t.is('#offscreen-container,#offscreen-container *') && t.is('#offscreen-toggle')) {
          let rInt = Math.floor(Math.random() * (3 - 1 + 1) + 1);
          
          switch (rInt) {
            default:
            case 1:
              offscreenContainer.toggle(1000);
              break;
            case 2:
              offscreenContainer.fadeToggle(1000);
              break;
            case 3:
              offscreenContainer.slideToggle(1000);
              break;
          }
        }
      });

问题视频

屏幕录制

问题

请注意视频中，当我使用开关打开屏幕外元素时，会显示该元素并且开关颜色会发生变化（表示开关处于“打开”状态）。当我单击页面上的任意位置时，屏幕外元素会隐藏，并且开关会重置为“关闭”配置。这种行为是正确的。

但是，如果我使用开关关闭屏幕外元素，开关不会重置为关闭配置。此外，屏幕外的元素隐藏起来，然后又神奇地再次显示。

Answer 1

工作解决方案

以下代码对我有用，并且满足我上面问题中指定的要求。我只是没想到我必须运行条件来检查元素样式是否为“块”。我的印象是

.toggle()

会帮我处理这一点。当我没有尝试添加额外的功能来控制屏幕外元素的单击事件时，它就以这种方式工作。

如果有人知道更好的方法，请告诉我。

jQuery

      $(document).on('click', (e) => {
        let t = $(e.target);

        // outside of offscreen container, but not the switch
        if (!t.is('#offscreen-container,#offscreen-container *') && !t.is('#offscreen-toggle')) {
          offscreenContainer.hide(1000);
          offscreenToggle.prop('checked', false);
        } else

        // outside of offscreen container, specifically the switch
        if (!t.is('#offscreen-container,#offscreen-container *') && t.is('#offscreen-toggle')) {
          if (offscreenContainer.get(0).style.display == 'block') {
            offscreenContainer.hide(1000);
            offscreenToggle.prop('checked', false);
          } else {
            offscreenContainer.toggle(1000);
          }
        }
      });