Question

我在此function中称呼div：

<div id="sideNavigation" class="sidenav">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
  <a href="#">Caixa de entrada</a>
    <ul>
        <li><a href="#s1" class="btn-show" data-element="#minhaDiv" style="font-size: 70%">Todas</a></li>
        <li><a href="#s2" class="btn-show" data-element="#minhaDiv1" style="font-size: 70%">Geral</a></li>
        <li><a href="#s3" class="btn-show" data-element="#minhaDiv2" style="font-size: 70%">Ocorrências</a></li>
    </ul>
  <a href="#">Mensagens</a>
    <ul>
        <li><a href="#s4" class="btn-show" data-element="#minhaDiv3" style="font-size: 70%">Enviadas</a></li>
        <li><a href="#s5" class="btn-show" data-element="#minhaDiv4" style="font-size: 70%">Não lidas</a></li>
    </ul>

</div>
<nav class="topnav">
  <a href="#" onclick="openNav()">
    <svg width="30" height="30" id="icoOpen">
        <path d="M0,5 30,5" stroke="#000" stroke-width="5"/>
        <path d="M0,14 30,14" stroke="#000" stroke-width="5"/>
        <path d="M0,23 30,23" stroke="#000" stroke-width="5"/>
    </svg>
  </a>
</nav>

<div id="main">
<!-- Add all your websites page content here  -->
</div>

javascript：

$('.topnav a').click(function(){
  $('#sideNavigation').style.width = "20%";
  $("#main").style.marginLeft = "20%";
});

$('.closebtn').click(function(){
  $('#sideNavigation').style.width = "0";
  $("#main").style.marginLeft = "0";
});

当我在页面上运行并打开或关闭div时，出现以下错误：

未捕获的TypeError：无法设置未定义的属性'width' 在HTMLAnchorElement。

Answer 1

我真的不知道你想做什么，但是最好是这样：

HTML：

<div id="sideNavigation" class="sidenav">
<a href="#" class="closebtn">&times;</a>
<a href="#" class="topnav">open</a>
  <a href="#">Caixa de entrada</a>
    <ul>
        <li><a href="#s1" class="btn-show" data-element="#minhaDiv" style="font-size: 70%">Todas</a></li>
        <li><a href="#s2" class="btn-show" data-element="#minhaDiv1" style="font-size: 70%">Geral</a></li>
        <li><a href="#s3" class="btn-show" data-element="#minhaDiv2" style="font-size: 70%">Ocorrências</a></li>
    </ul>
  <a href="#">Mensagens</a>
    <ul>
        <li><a href="#s4" class="btn-show" data-element="#minhaDiv3" style="font-size: 70%">Enviadas</a></li>
        <li><a href="#s5" class="btn-show" data-element="#minhaDiv4" style="font-size: 70%">Não lidas</a></li>
    </ul>

</div>

JQUERY：

$('.topnav').click(function(){
  $('#sideNavigation').css("width", "20%");
  $("#main").css("margin-left", "20%");
});

$('.closebtn').click(function(){
  $('#sideNavigation').css("width", "0");
  $("#main").css("margin-left", "0");
});

请勿混用jQuery和js

执行函数时出错，无法设置属性“宽度”

1 个答案: