Question

我正在执行此侧边栏菜单，但工作正常，但问题是当我单击菜单按钮图标时它会打开菜单，但在侧边栏已经打开并单击时它不会返回关闭侧边栏。当我在主体本身（而不是图标本身）上单击侧栏之外时，它将返回侧栏。

是否有一种方法可以仅使用CSS执行关闭操作？

public class My_Controller { 
@AuraEnabled
public static Decimal getRate(String currFrom, String currTo) {

Decimal value = 1.067773;

return value;  
}
}

<aura:component controller="My_Controller">
<aura:attribute name = "value" type= "Decimal"/>
  <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
<lightning:input type="string" name="res" aura:id="res" value= " 
{!v.value}" label="Result"/>

<aura:component>

add a new method in controller.js:-
({

    doInit : function(component, event, helper) {
        var action = component.get("c.getRate");
        action.setParams({
            "currFrom": 'Test',
            "currTo"  : 'Test'
        });

        action.setCallback( this, function(actionResult) {
            var state = actionResult.getState();
            component.set('v.spinner',false);
            if (state === "SUCCESS"){
                var result = actionResult.getReturnValue();
                component.set("v.value",result);
            }
        });
        $A.enqueueAction(action);
    }
    })

x = min([len(list1[i]) for i in range(len(list1))])    
[[i[j] for i in list1] for j in range(x)]

Answer 1

您的菜单没有被点击的原因是因为您使用:focus将其固定到位。因此，如果再次单击它，它仍然会聚焦并且不会崩溃。

要解决此问题，您可以在trigger下放置另一个元素，并在聚焦时将pointer-events移开，以便可以单击下面的元素。这样trigger会失去焦点，菜单也会折叠。

/* Added for collapse */

   .s-sidebar__trigger:focus {
     pointer-events: none;
   }
   .s-sidebar__collapse {
      z-index: 1;
      position: fixed;
      top: 0;
      right: 0;
      width: 4em;
      height: 4em;
   }

/* End of added CSS */


    *, *::before, *::after {
       box-sizing: border-box;
    }

    body {
       font-family: sans-serif;
       font-size: 1em;
       color: #333;
    }

    h1 {
      font-size: 1.4em;
    }

    em {
       font-style: normal;
    }

    a {
       text-decoration: none;
       color: inherit;
    } 

    /* Layout */
    .s-layout {
       display: flex;
       width: 100%;
       min-height: 100vh;
    }

    .s-layout__content {
       display: flex;
       justify-content: center;
       align-items: center;
       flex: 1;
    }

    /* Sidebar */
    .s-sidebar__trigger {
       z-index: 2;
       position: fixed;
       top: 0;
       right: 0;
       width: 4em;
       height: 4em;
       background: #192b3c;
    }

    .s-sidebar__trigger > i {
       display: inline-block;
       margin: 1.5em 0 0 1.5em;
       color: #f07ab0;
    }

    .s-sidebar__nav {
       position: fixed;
       top: 0;
       right: -176px;
       overflow: hidden;
       transition: all .3s ease-in;
       width: 15em;
       height: 100%;
       background: #243e56;
       color: rgba(255, 255, 255, 0.7);
    }

    .s-sidebar__nav:hover,
    .s-sidebar__nav:focus,
    .s-sidebar__trigger:focus + .s-sidebar__nav,
    .s-sidebar__trigger:hover + .s-sidebar__nav {
       right: 0;
    }

    .s-sidebar__nav ul {
       position: absolute;
       top: 4em;
       left: 0;
       margin: 0;
       padding: 0;
       width: 15em;
    }

    .s-sidebar__nav ul li {
       width: 100%;
    }

    .s-sidebar__nav-link {
       position: relative;
       display: inline-block;
       width: 100%;
       height: 4em;
    }

    .s-sidebar__nav-link em {
       position: absolute;
       top: 50%;
       left: 4em;
       transform: translateY(-50%);
    }

    .s-sidebar__nav-link:hover {
       background: #4d6276;
    }

    .s-sidebar__nav-link > i {
       position: absolute;
       top: 0;
       left: 0;
       display: inline-block;
       width: 4em;
       height: 4em;
    }

    .s-sidebar__nav-link > i::before {
       position: absolute;
       top: 50%;
       left: 50%;
       transform: translate(-50%, -50%);
    }

    /* Mobile First */
    @media (min-width: 42em) {
       .s-layout__content {
          margin-left: 4em;
       }
       
       /* Sidebar */
       .s-sidebar__trigger {
          width: 4em;
       }
       
       .s-sidebar__nav {
          width: 4em;
          right: 0;
       }
       
       .s-sidebar__nav:hover,
       .s-sidebar__nav:focus,
       .s-sidebar__trigger:hover + .s-sidebar__nav,
       .s-sidebar__trigger:focus + .s-sidebar__nav {
          width: 15em;
       }
    }

    @media (min-width: 68em) {
       .s-layout__content {
          margin-left: 15em;
       }
       
       /* Sidebar */
       .s-sidebar__trigger {
          display: none
       }
       
       .s-sidebar__nav {
          width: 15em;
       }
    
       .s-sidebar__nav ul {
          top: 1.3em;
       }
    }

 <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
    <div class="s-layout">
    <!-- Sidebar -->
    <div class="s-layout__sidebar">
      <a class="s-sidebar__collapse" href="#0"></a>
      <a class="s-sidebar__trigger" href="#0">
         <i class="fa fa-bars"></i>
      </a>
      <nav class="s-sidebar__nav">
         <ul>
            <li>
               <a class="s-sidebar__nav-link" href="#0">
                  <i class="fa fa-home"></i><em>Home</em>
               </a>
            </li>
            <li>
               <a class="s-sidebar__nav-link" href="#0">
                  <i class="fa fa-camera"></i><em>Camera</em>
               </a>
            </li>
         </ul>
      </nav>
    </div>
    <!-- Content -->
    <main class="s-layout__content">
      <h1>Full View, Please!</h1>
    </main>
    </div>

如何使侧边栏返回菜单图标单击

1 个答案: