javascript - 当我单击页面上的其他任何位置时，我希望我的手风琴关闭

Question

当我单击页面上的任何其他位置时，手风琴应该会自动关闭。

我只会在移动设备上使用它，因此它应该可以在移动设备上使用。

var acc = document.getElementsByClassName("accordion_mobile");
var i;

// Open the first accordion
// Add onclick listener to every accordion element
for (i = 0; i < acc.length; i++) {
    acc[i].onclick = function() {
        // For toggling purposes detect if the clicked section is already "active"
        var isActive = this.classList.contains("active");

        // Close all accordions
        var allAccordions = document.getElementsByClassName("accordion_mobile");
        for (j = 0; j < allAccordions.length; j++) {
            // Remove active class from section header
            allAccordions[j].classList.remove("active");

            // Remove the max-height class from the panel to close it
            var panel = allAccordions[j].nextElementSibling;
            var maxHeightValue = getStyle(panel, "maxHeight");

            if (maxHeightValue !== "0px") {
                panel.style.maxHeight = null;
            }
        }

        // Toggle the clicked section using a ternary operator
        isActive ? this.classList.remove("active") : this.classList.add("active");

        // Toggle the panel element
        var panel = this.nextElementSibling;
        var maxHeightValue = getStyle(panel, "maxHeight");

        if (maxHeightValue !== "0px") {
            panel.style.maxHeight = null;
        } else {
            panel.style.maxHeight = panel.scrollHeight + "px";
        }
    };
}

// Cross-browser way to get the computed height of a certain element. Credit to @CMS on StackOverflow (http://stackoverflow.com/a/2531934/7926565)
function getStyle(el, styleProp) {
    var value, defaultView = (el.ownerDocument || document).defaultView;
    if (defaultView && defaultView.getComputedStyle) {
        // sanitize property name to css notation
        // (hypen separated words eg. font-Size)
        styleProp = styleProp.replace(/([A-Z])/g, "-$1").toLowerCase();
        return defaultView.getComputedStyle(el, null).getPropertyValue(styleProp);
    } else if (el.currentStyle) { // IE
        // sanitize property name to camelCase
        styleProp = styleProp.replace(/\-(\w)/g, function(str, letter) {
            return letter.toUpperCase();
        });
        value = el.currentStyle[styleProp];
        // convert other units to pixels on IE
        if (/^\d+(em|pt|%|ex)?$/i.test(value)) {
            return (function(value) {
                var oldLeft = el.style.left,
                    oldRsLeft = el.runtimeStyle.left;
                el.runtimeStyle.left = el.currentStyle.left;
                el.style.left = value || 0;
                value = el.style.pixelLeft + "px";
                el.style.left = oldLeft;
                el.runtimeStyle.left = oldRsLeft;
                return value;
            })(value);
        }
        return value;
    }
}

CSS：

button.accordion_mobile {
    color: #ffffff;
    cursor: pointer;
    padding: 10px;
    width: 100%;
    border: none;
    text-align: center;
    outline: none;
    font-size: 15px;
    transition: 0.4s;
}

button.accordion_mobile:after {
    display: none
}

button.accordion_mobile.active:after {
    content: "\2212";
}

div.panel {
    padding: 0 18px;
    background-color: white;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
}

.acc_mobile {
  position: absolute;
  bottom:0px;
}

.yoga_mobile {
  background-color: rgba(215,66,41,0.8)!important;
}

.accommodation_mobile {
  background-color: rgba(231,96,47,0.85)!important;
}

.food_mobile {
  background-color: rgba(243,154,49,0.85)!important;
}

.paintball_mobile {
  background-color: rgba(137,172,162,0.9)!important;
}

.cable_mobile {
  background-color: rgba(61,152,164,0.85)!important;
}

.scuba_mobile {
  background-color: rgba(19,98,122,0.85)!important;
}

HTML：

<div class="acc_mobile"><button class="accordion_mobile yoga_mobile">YOGA</button>
    <div class="panel yoga_mobile">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>

    <button class="accordion_mobile accommodation_mobile">ACCOMMODATION</button>
    <div class="panel accommodation_mobile">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>

    <button class="accordion_mobile food_mobile">FOOD</button>
    <div class="panel food_mobile">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>

    <button class="accordion_mobile paintball_mobile">PAINTBALL</button>
    <div class="panel paintball_mobile">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>

    <button class="accordion_mobile cable_mobile">CABLE</button>
    <div class="panel cable_mobile">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>

    <button class="accordion_mobile scuba_mobile">SCUBA</button>
    <div class="panel scuba_mobile">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
</div>

标签： javascripthtmlcss

Answer 1

addEventListener("click", function(a) {
    if (a.srcElement.className.indexOf('accordion_mobile') == -1) {
        var allAccordions = document.getElementsByClassName("accordion_mobile");
        for (j = 0; j < allAccordions.length; j++) {
            // Remove active class from section header
            allAccordions[j].classList.remove("active");

            // Remove the max-height class from the panel to close it
            var panel = allAccordions[j].nextElementSibling;
            var maxHeightValue = getStyle(panel, "maxHeight");

            if (maxHeightValue !== "0px") {
                panel.style.maxHeight = null;
            }
        }
    }
});

小提琴：https ://jsfiddle.net/fkdv5a67/