Day20-自制下拉式选单_我就想要美美的

今天来弄一个自制的漂亮下拉式选单

首先下拉式选单，会有上面可以按的地方跟下方会弹出来的悬浮按钮
我这边直接设置了两个图样，一个是向上一个向下，刚打开网站时应该是没有显示悬浮按钮的，所以先把往上的隐藏，往下的显示

<div class="input-group" id="input-group">
    <button type="button" class="btn dropdown-toggle" id="dropdown-toggle">
        请选择　
        <i class="fas fa-chevron-down" style="display:block"></i>
        <i class="fas fa-chevron-up" style="display:none"></i>
    </button>
    <ul class="dropdown-menu" id="dropdown-menu">
        <li><a href="#">全部</a></li>
        <li><a href="#">台北</a></li>
        <li><a href="#">新北</a></li>
        <li><a href="#">台中</a></li>
    </ul>
</div>

button的部分是可以案的部分
ul是悬浮按钮的部分

然後把CSS加上去，ul的部分因为要悬浮所以要做position: absolute; 并把高度拉到最高z-index: 100;
稍微做一下美化，自己喜欢的样子
主要是ul的部分需要对一下位置，想要大概在哪个位置要排版一下~

完成後在ul设置display: none;
然後进入JS
这边要用的是jQuery的. slideToggle()这个方法
设置当button点击时，ul的dropdown-menu做拉开跟关上的动作
先设置一个在另外的函式中，因为其他地方还会呼叫到，直接拉出来比较方便

function change(n){
    $("#dropdown-menu").slideToggle("");
    if (n == 1) {
        slide = 0;
        $(".fa-chevron-up").attr("style", "display:none")
        $(".fa-chevron-down").attr("style", "display:block")
    }
    else {
        slide = 1;
        $(".fa-chevron-up").attr("style", "display:block")
        $(".fa-chevron-down").attr("style", "display:none")
    }
}

然後在到ready中写当dropdown-toggle被点击时，要发生的变化
因为要发生的变化我们已经写好函式了，这边直接呼叫并给予当前状态
需要另外设置一个变数(需为全域变数，其他地方会用到)，用以帮助我们告诉change函式要打开还是关上

var slide = 0;
$(function () {
    $("#dropdown-toggle").click(function () {
        change(slide)
    });
})

利用. slideToggle()方法可以直接做到拉开与关上不用另外再设置东西了
这样简单漂亮的下拉式选单就完成罗!!

然後让下拉式选单的按钮有一点作用
首先像之前一样多设一个div，并设置id，这次设在下面

<div class="input-group" id="input-group">
...
</div>
<div id="show"></div>

然後在JS写函式
选择後让ul关上，一样是透过改变slide数值跟呼叫change函式

function area(area) {
    $("#show").empty()
    slide = 0
    change(slide)
	$("#show").append(area.text)
}

跟之前选择器一样需要在HTML加上onclick="area(this)"
因为这次抓取的是a连结，然後文字是放在外面，所以直接抓取area.text便可以抓取到a连结的文字了~
然後便可以把抓到的文字或是另外设置的name、data-属性等东西，运用到需要的地方了