如何判断导航栏是否折叠？

编程问答 2022-08-14

问题描述

我有一个导航栏：

<script src="https://sdk.amazonaws.com/js/aws-sdk-2.1.24.min.js">
</script>

<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js">
</script>

<script type="text/javascript">


function sendLoadMessage () {

window.parent.postMessage("LoadOk1","*");

}
function postMsg(msg) {
   window.parent.postMessage(msg,"*");
}

const BUCKET_NAME = 'EXAMPLE_BUCKET';
const IAM_USER_KEY = 'EXAMPLE_KEY';
const IAM_USER_SECRET = 'EXAMPLE_SECRET_KEY'; 

function Send() {

    var files = document.getElementById('fileUpload').files;
    let In = files[0]
    console.log("In",In)


    uploadToS3(In)

    function uploadToS3(file) {

      let s3bucket = new AWS.S3({
          accessKeyId: IAM_USER_KEY,secretAccessKey: IAM_USER_SECRET,Bucket: BUCKET_NAME
      });

      s3bucket.createBucket(function () {

          var params = {
              Bucket: BUCKET_NAME,Key: "New",Body: In
          };
          s3bucket.upload(params,function (err,data) {
              if (err) {
              console.log('error in callback');
              console.log(err);

              }
              console.log('success');
              console.log(data);

          });
      });
    }

} 
</script>

<div>        
   <input type="file" id="fileUpload">    
</div>    
<div> 
   <button class="button" onclick="Send()">Submit</button>    
</div>  
  

<body onload="sendLoadMessage ();" style="background-color:white;">

<div id="GoogleSheetsdocs"></div>

</body>

当导航栏折叠时（即未展开），我想在页面上设置其他元素的样式。在javascript中，有没有一种简单的方法可以判断导航栏何时折叠或未折叠？试过这个：

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>POST</AllowedMethod>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedMethod>PUT</AllowedMethod>
    <AllowedMethod>DELETE</AllowedMethod>
    <AllowedMethod>HEAD</AllowedMethod>
    <ExposeHeader>ETag</ExposeHeader>
    <AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>

但是它不起作用。预先感谢。

解决方法

您可以使用collapse events：

$('#navbar').on('show.bs.collapse',function () {
    console.log('not collapsed');
}).on('hide.bs.collapse',function () {
    console.log('collapsed');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>

<nav id="navbar" class="navbar fixed-top navbar-expand-md navbar-light bg-light">
    <a class="navbar-brand" href="#"></a>
    <button id="toggle" class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse text-right" id="navbarNav">
        <ul class="navbar-nav ml-auto">
            <li class="nav-item">
                <a class="nav-link" id="about" href="Gibbs.html"><span><strong>ABOUT</strong></span></a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#"><span>NEWS</span></a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#"><span>LAB MEMBERS</span></a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#"><span>RESEARCH</span></a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="publications.html"><span>PUBLICATIONS</span></a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#"><span>OPPORTUNITIES</span></a>
            </li>
        </ul>
    </div>
</nav>

,

我对其进行了测试，并且可以正常工作。您可能无法触发测试，或者您的切换按钮没有提及的ID（切换）。

触发事件（点击）

通过以下方式捕获所有点击：

window.onclick = function(e) { ... };

替代测试

很好的老式Vanilla JS：

if (!document.getElementById('toggle').classList.contains('collapsed')) {...}
bootstrap-4htmljavascriptnavnav