# Hyui flex修改討論
###### tags: `我的筆記`

### ⭐ 表單css input[type='checkbox']:focus改成 input[type='checkbox']:focus-visible

main.js內的下面這段可以刪除

$('input[type="checkbox"]')
 .off()
 .on('click', function (e) {
   $(this).blur();
  });

by 玟諭 : 2024.11.26
### ⭐ form頁密碼眼睛的開關
當拿掉slick.min.js時，form頁密碼眼睛會打不開

### ⭐ hyui flex megamenu RWD問題
* megamenu 桌機縮成手機版時，第二層選項展不開
* 第一層點擊後進入np頁，手機版時，若其下有子項目者，第一層連結的點擊需失效，變成展開子選單的功能

[hyui flex megamenu連結 🌐](https://hywebu00.github.io/hyui_flex/mp_template_megamenu.htm)
[嘗試調整的台中稅 🌐](https://hywebu00.github.io/2024_taxtaichung/mp.htm)

### ⭐ hyui flex 的search，當兩個input連在一起的時候，間距就不見了

### ⭐ hyui flex form `<input type= "radio">` 可以先不用checked，css加上在 hover 或鍵盤 tab 遊走到時，增加border 變色效果
[參考連結 🌐](https://hywebu00.github.io/2024_mohw/ap_step2.html)

### ⭐ hyui flex 分享 twitter logo要換新的，還要新增threads的
### ⭐ hyui flex 手機版的navigation scss分兩個地方寫 ？

### ⭐ hyui flex的scss， style.scss裡
@import '../vendor/fancyBox/fancybox.css';
fancyBox 的 B請改小寫 b

### ⭐ 網站放大至200%以上後，左上角出現選單按鈕，鍵盤tab鍵要可展開選單，並進入選單內容

### ⭐ 刪掉 flex_template.htm

### ⭐ tab寫法：
可否增加與hyui V4版本一樣


### ⭐ 無障礙修改對應id位置
原先是這樣


請修改成

### ⭐ hyui.js中，電腦版 menu第二層滑進滑出的速度：

fadeIn和fadeOut 的速度加上 200

  /////////////// PC版設定 /////////////
/*-----------------------------------*/
hideSidebar();
_body.removeClass('noscroll');
$('.m_search').hide();
search_mode = false;
$('.language').find('ul').hide();
// 副選單滑出
liHasChild.on({
    mouseenter: function() {
        $(this).children('ul').stop(true, false).fadeIn(200);
    },
    mouseleave: function() {
        $(this).parent().siblings('ul').hide();
        $(this).children('ul').stop(true, false).fadeOut(200);
    },
});
liHasChild.off('click');
// megamenu
// 副選單滑出
liHasChild2.on({
    mouseenter: function() {
        $(this).children('ul').stop(true, false).fadeIn(200);
    },
    mouseleave: function() {
        $(this).parent().siblings('ul').hide();
        $(this).children('ul').stop(true, false).fadeOut(200);
    },
});

### ⭐ 無障礙要求，區塊按esc後關閉

var emailStatus = false; // 假的判斷式，先設定沒有開啟
_navlist.find(".emailbtn").click(function () {
  $(this).siblings(".list_second").stop().slideToggle();
  $(this).parent("li").siblings().find(".search").slideUp();
  emailStatus = true;
});
if ((emailStatus = true)) {
  $("body").keydown(function (e) {
    if (e.keyCode == 27) {
      $(".list_second").slideUp();
      emailStatus = false;
    }
  });
}

### ⭐ menu下拉選單，除了最後一組選單會往左邊展開外，其他選單有時也會往左


修改後

// ---  判斷PC版選單超過畫面時左邊增加.leftSlider
function checkUlWidth() {
    // --- 計算
    var menuLeft = $('.header .container').offset().left;
    var menuLi = $('.header .menu > ul > li');
    var windowWidth = $(window).outerWidth();
    var layer = 0;
    menuLi.each(function() {
        var menuLiLeft = $(this).offset().left;
        var leftWidth = $(this).width() * $(this).find('ul').last().parents('ul').length;
        menuLiLeft + leftWidth + menuLeft > windowWidth ? $(this).addClass('leftSlider') : $(this).removeClass('leftSlider');
    });
}
checkUlWidth();
$(window).on('resize', function() {
    checkUlWidth();
});

### ⭐ 圖片html去除picture的寫法

cp.html

<figure class="pic">
    <!-- 此範例為4:3比例 -->
    <picture>
        <source media="(min-width: 768px)" srcset="images/demo/01.jpg" />
        <source media="(max-width: 767px)" srcset="images/demo/01.jpg" />
        <img data-src="images/demo/01.jpg" class="lazy" alt="圖片說明" />
        <noscript><img src="images/demo/01.jpg" alt="圖片說明" /></noscript>
    </picture>
    <figcaption>圖說</figcaption>
</figure>

flex_template.htm、lp_album_template.htm、slider.htm

<div class="img-container">
    <picture>
        <source media="(min-width: 1200px)" data-srcset="images/demo/01.jpg" />
        <source media="(min-width: 992px)" data-srcset="images/demo/01.jpg" />
        <source media="(min-width: 576px)" data-srcset="images/demo/01.jpg" />
        <source media="(max-width: 575px)" data-srcset="images/demo/01.jpg" />
        <img data-src="images/demo/01.jpg" class="lazy" alt="圖片說明" />
        <noscript><img src="images/demo/01.jpg" alt="圖片說明" /></noscript>
    </picture>
</div>

### ⭐ lp_template.htm 的megamenu，scss沒有加上 sticky

### ⭐ lp_table_template.htm

data-title 可以移除

<tbody>
    <tr>
      <td data-title="編號" class="num">01</td>
      <td data-title="標題"><a href="#">通勤搭車看預報 環保集點10倍送</a></td>
      <td data-title="日期" class="date">2018/01/01</td>
    </tr>

<style>
.ui-infobar{
max-width:70%;
}
.markdown-body{
max-width:70%;
}
</style>