展开一个 div 元素 onClick 总是展开同一个 div 元素答案

【问题标题】：Expanding a div element onClick always expands the same div element展开一个 div 元素 onClick 总是展开同一个 div 元素
【发布时间】：2020-08-17 12:19:59
【问题描述】：

我在一个页面上有三个 div，其中包含三个单独的图表，我想在点击时将其中一个扩展为全屏。

我的目标是 div 中的一个类，我想展开 (.container-expand) 以及按钮上的一个类 (.toggle_fullscreen)，这样无论单击哪个按钮，该元素都会展开，示例如下。

$('.toggle_fullscreen').on('click', function(){
    // if already full screen; exit
    // else go fullscreen
    if (
        document.fullscreenElement ||
        document.webkitFullscreenElement ||
        document.mozFullScreenElement ||
        document.msFullscreenElement
    ) {
        if (document.exitFullscreen) {
            document.exitFullscreen();
        } else if (document.mozCancelFullScreen) {
            document.mozCancelFullScreen();
        } else if (document.webkitExitFullscreen) {
            document.webkitExitFullscreen();
        } else if (document.msExitFullscreen) {
            document.msExitFullscreen();
        }
    } else {
        element = $('.container-expand').get(0);
        if (element.requestFullscreen) {
            element.requestFullscreen();
        } else if (element.mozRequestFullScreen) {
            element.mozRequestFullScreen();
        } else if (element.webkitRequestFullscreen) {
            element.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
        } else if (element.msRequestFullscreen) {
            element.msRequestFullscreen();
        }
    }
});

按钮是;

<button type="button" class="btn btn-sm btn-white toggle_fullscreen">Go Fullscreen</button>

而容器是；

 <div class="card container-expand" id="chart1">

显示布局的 2 个示例 div

<div class="card col-md-6 border container-expand">
    <div class="dropdown show ">
        <button type="button" class="btn btn-sm btn-white toggle_fullscreen">Go Fullscreen</button>
        <a class="btn btn-sm btn-white" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown"
            aria-haspopup="true" aria-expanded="false"><i class="fa fa-download"></i></a>
        <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
            <a style="margin-left: 10px" href="#" id="download1" download="ChartImage1.jpg"></i>save as
                image</a>
            <button class="dropdown-item" onclick="saveAsPDF1()">save as pdf</button>
            <a class="dropdown-item" href="#">export charts as excel</a>
        </div>
    </div>
    <h4 class="chartTitle">This is chart 1</h4>
    <canvas class="chart1" id="chart1" width="400" height="200"></canvas>
</div>

<div class="card col-md-6 border container_expand">
    <div class="dropdown show">
        <button type="button" class="btn btn-sm btn-white toggle_fullscreen">Go Fullscreen</button>
        <a class="btn btn-sm btn-white" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown"
            aria-haspopup="true" aria-expanded="false"><i class="fa fa-download"></i></a>
        <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
            <a style="margin-left: 10px" href="#" id="download2" download="ChartImage2.jpg"></i>save as
                image</a>
            <button class="dropdown-item" onclick="saveAsPDF2();">save as pdf</button>
            <a class="dropdown-item" href="#">export charts as excel</a>
        </div>
    </div>
    <h4 class="chartTitle">This is Chart 2</h4>
    <canvas class="chart2 container-expand" id="chart2" width="400" height="200"></canvas>
</div>

我得到的结果是，它始终是展开到全屏的同一个 div。例如，我在图表 3 上单击全屏，图表 1 将展开。图 2 相同。

在推送到分支之前，这对每个图表都很好，并且它的 div 正确扩展到全屏，然后没有，所以我认为我对正在发生的事情的理解是错误的。

我仍在学习，我知道我可以通过重复代码和更改 id 来使其工作，因此它们是独一无二的，但我想从中学习一些理解。

感谢任何帮助。

【问题讨论】：

元素 = $('.container-expand').get(0);永远会给你第一个。我假设您想要在按钮之后或之前出现的 div。
您需要向我们展示您的代码以及按钮相对于您要展开的 div 的位置，请参阅minimal reproducible example
可以获取被$('.toggle_fullscreen').on('click', function(e){ const btn = $(e.target)...}点击的元素/跨度>
@Michael 感谢您的回复，我添加了一些 div 作为上下文。我希望这有帮助。非常感谢
就用element = $(this).closest('.container-expand');jQuery closest method

标签： javascript php html jquery css

【解决方案1】：

你可以这样做：

$('.toggle_fullscreen').on('click', function(e){
    var element;
    
    // if already full screen; exit
    // else go fullscreen
    
    if (document.fullscreenElement || ... ) {
        if (document.exitFullscreen) {
            document.exitFullscreen();
        } else if (document.mozCancelFullScreen) {
            document.mozCancelFullScreen();
        } else if (document.webkitExitFullscreen) {
            document.webkitExitFullscreen();
        } else if (document.msExitFullscreen) {
            document.msExitFullscreen();
        }
    } else {
        /**
         * based on your current event target `e`,
         * find the .container-expand belonging to the current .dropdown box
         **/
         
        element = $(e).parent().parent().find('.container-expand');

        if (element.requestFullscreen) {
            element.requestFullscreen();
        } else if (element.mozRequestFullScreen) {
            element.mozRequestFullScreen();
        } else if (element.webkitRequestFullscreen) {
            element.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
        } else if (element.msRequestFullscreen) {
            element.msRequestFullscreen();
        }
    }
});

【讨论】：