pointer-events: none 顧名思義，就是鼠標(biāo)事件拜拜的意思。元素應(yīng)用了該 CSS 屬性，鏈接啊，點擊啊什么的都變成了 “浮云牌醬油”。pointer-events: none 的作用是讓元素實體 “虛化”。例如一個應(yīng)用 pointer-events: none 的按鈕元素，則我們在頁面上看到的這個按鈕，只是一個虛幻的影子而已，您可以理解為海市蜃樓，幽靈的軀體。當(dāng)我們用手觸碰它的時候可以輕易地沒有任何感覺地從中穿過去。
來自網(wǎng)絡(luò)解釋

1.點擊curencies之前設(shè)置側(cè)邊欄mshe-sidebar類以下屬性為
默認(rèn)隱藏curencies之后要顯示的內(nèi)容區(qū)即以下display:none

<style>
    .currencies{
        display: none;
    }
    .mshe-sidebar{
        visibility: visible;
        pointer-events: auto;
    }
</style>

image.png

image.png

效果為以上顯示圖片 即側(cè)邊欄頁面內(nèi)容更換
2.掛載點擊事件觸發(fā)事件
如以下

<script>
        /**choose currencies page*/
        $('.j-show-select-ctn-curr').click(function () {
            $('.currencies').css({
                'display': 'block',
            });
        })
        /***close currencies page***/
        $('.close-select-ctn').click(function(){
            $('.currencies').css({
                'display': 'none',
            });
        });
</script>
//主要HTML
<!--遮罩層-->
 <div class="backdrop">
       <img src="http://www.web.com/dist/images/shoip-132456.png">
 </div>
<!--側(cè)邊欄主體-->
  <div class="mshe-sidebar">
        <div class="sidebar-list sidebar-nav-list">
            <ul class="sidebar-item">
                 <!--其他的選擇項-->
                 <li class="j-show-select-ctn-curr"><a>Funny</a></li>
                 <li class="j-show-select-ctn-curr">
                  <a href="####">{:__('CURRENCY')}</a>
                      <div class="select-right">
                       <span class="currency-title">{$this_currencies.currencies_name}</span>
                        <i class="iconfont icon-right"></i>
                      </div>
                 </li>
            </ul>
        </div>
   </div>
    <div class="currencies mshe-sidebar">
        <div class="sidebar-select-title">
            <i class="iconfont icon-back close-select-ctn"></i>
            {:__('Currencies')}
        </div>
        <div class="sidebar-select-list">
            <ul class="diy-change-currencies">
                {foreach $currencies as $val}
                <li data-index="{$val.currencies_id}">
                    <img src="{$val.currencies_icon}" class="lzay " data-original="        
                    {$val.currencies_icon}"style="width:.64rem;height: .48rem;" >
                    &nbsp;{$val.currencies_name}
                    {if $this_currencies.currencies_name == $val.currencies_name}
                        <i class="iconfont icon-dagou1"></i>
                    {/if}
                </li>
                {/foreach}
            </ul>
        </div>
    </div>