기업 홈페이지 오류 개선 (lnb 터치 오류)

 

웹 접근성 마크를 따기 위해서 조치 했던 부분에서 오류가 났는지

모바일에서 lnb를 클릭했을 때 한번에 슬라이드 다운이 되지 않는 현상 발생.

 

$(function () {
  var lang = window.location.pathname.match(/\/(kr|en)/g)[0].replace('/', '')

  $.getJSON('../../resources/json/menu-' + lang + '.json', function (data) {
    $('.breadcrumb_cont').remove()

    var menu = data.find(function (elem) {
      return elem.path === window.location.pathname
    })
    var parent = data.find(function (elem) {
      return elem.id === menu.parent
    })
    var top = parent.parent === null ? parent : data.find(function (elem) {
      return elem.id === parent.parent
    })

    menu.siblings = data.filter(function (elem) {
      return elem.parent === menu.parent
    })
    parent.siblings = data.filter(function (elem) {
      return elem.parent === parent.parent
    })

    var html = ''
    html += '<ul class="breadcrumb_cont">'
    html += '<li class="li home"><a href="../../index.html"><span>HOME</span></a></li>'
    // 1 depth
    html += '<li class="li menu">'
    html += '<a href="' + menu.path + '" class="link" >' + top.name + '</a>'
    html += '<div class="dep">'
    html += '<ul>'
    data.filter(function (elem) {
      return elem.parent === null
    }).forEach(function (elem) {
      html += '<li class="' + (elem.id === top.id ? 'on' : null) + '"><a href="' + elem.link + '" ">' + elem.name + '</a></li>'
    })
    html += '</ul>'
    html += '</div>'
    html += '</li>'
    // 2 depth
    if (parent !== top) {
      html += '<li class="li">'
      html += '<a href="' + (parent.path ? parent.path : parent.link ? parent.link : '#') + '" class="link" title="바로가기">' + parent.name + '</a>'
      html += '<div class="dep">'
      html += '<ul>'
      parent.siblings.forEach(function (elem) {
        html += '<li class="' + (elem.id === parent.id ? 'on' : '') + '"><a href="' + (elem.path ? elem.path : elem.link ? elem.link : '#') + '">' + elem.name + '</a></li>'
      })
      html += '</ul>'
      html += '</div>'
      html += '</li>'
    }
    // 3 depth
    if (menu.isVisible) {
      html += '<li class="li">'
      html += '<a href="' + menu.path + '" class="link">' + menu.name + '</a>'
      html += '<div class="dep">'
      html += '<ul>'
      menu.siblings.forEach(function (elem) {
        if (!elem.hasOwnProperty('substitute')) {
          html += '<li class="' + (elem.id === menu.id ? 'on' : '') + '"><a href="' + (elem.path ? elem.path : elem.link ? elem.link : '#') + '">' + elem.name + '</a></li>'
        }
      })
      html += '</ul>'
      html += '</div>'
      html += '</li>'
    }
    html += '</ul>'
    $('.breadcrumb').html(html)
  }).done(function () {
    $('.breadcrumb .li .dep ul').css('min-width', $('.breadcrumb .li.act .link').innerWidth())
    $('.breadcrumb .link').attr('title', ' 접기' );
    $('.breadcrumb .link').on('mouseover click', function () {

                $(".breadcrumb .link").removeAttr('title');

      if ($(this).closest('.li').hasClass('act')) {
        $(this).closest('.li').removeClass('act');
                $(this).attr('title', ' 접기' );
      } else {
        $('.breadcrumb .li').removeClass('act')
        $(this).closest('.li').addClass('act')
        $(this).closest('.li').find('.dep ul').css('min-width', $(this).closest('.li').find('.link').innerWidth())
        $(this).attr('title', ' 펼치기' );
      }
      return false
    })
    $('.breadcrumb .dep, .breadcrumb').mouseleave(function () {
      $('.breadcrumb .li').removeClass('act')
      $('.breadcrumb .link').attr('title', ' 접기' );
    })
    $('.breadcrumb .dep').mouseleave(function () {
      $(this).prev().attr('title', ' 접기' );
    })
    $('.breadcrumb .li > a').focusin(function () {
      $('.breadcrumb .li').removeClass('act')
      $(this).parent().addClass('act')
      $('.breadcrumb .link').attr('title', ' 접기' );
      $(this).attr('title', ' 펼치기' );
    })
    
    $('.breadcrumb li:last-child .dep li:last-child a').keydown(function (e) {
      if (e.keyCode === 9) {
        $('.breadcrumb .li').removeClass('act')
      }
    })
  }).fail(function () {
    console.error('menu-' + lang + '.json is not exist.')
  })
})

└ 수정 전

 

┌ 수정 후

$(function () {
  var lang = window.location.pathname.match(/\/(kr|en)/g)[0].replace('/', '')

  $.getJSON('../../resources/json/menu-' + lang + '.json', function (data) {
    $('.breadcrumb_cont').remove()

    var menu = data.find(function (elem) {
      return elem.path === window.location.pathname
    })
    var parent = data.find(function (elem) {
      return elem.id === menu.parent
    })
    var top = parent.parent === null ? parent : data.find(function (elem) {
      return elem.id === parent.parent
    })

    menu.siblings = data.filter(function (elem) {
      return elem.parent === menu.parent
    })
    parent.siblings = data.filter(function (elem) {
      return elem.parent === parent.parent
    })

    var html = ''
    html += '<ul class="breadcrumb_cont">'
    html += '<li class="li home"><a href="../../index.html"><span>HOME</span></a></li>'
    // 1 depth
    html += '<li class="li menu"  title="접기">'
    html += '<a href="' + menu.path + '" class="link" >' + top.name + '</a>'
    html += '<div class="dep">'
    html += '<ul>'
    data.filter(function (elem) {
      return elem.parent === null
    }).forEach(function (elem) {
      html += '<li class="' + (elem.id === top.id ? 'on' : null) + '"><a href="' + elem.link + '" ">' + elem.name + '</a></li>'
    })
    html += '</ul>'
    html += '</div>'
    html += '</li>'
    // 2 depth
    if (parent !== top) {
      html += '<li class="li">'
      html += '<a href="' + (parent.path ? parent.path : parent.link ? parent.link : '#') + '" class="link">' + parent.name + '</a>'
      html += '<div class="dep">'
      html += '<ul>'
      parent.siblings.forEach(function (elem) {
        html += '<li class="' + (elem.id === parent.id ? 'on' : '') + '"><a href="' + (elem.path ? elem.path : elem.link ? elem.link : '#') + '">' + elem.name + '</a></li>'
      })
      html += '</ul>'
      html += '</div>'
      html += '</li>'
    }
    // 3 depth
    if (menu.isVisible) {
      html += '<li class="li" title="접기">'
      html += '<a href="' + menu.path + '" class="link">' + menu.name + '</a>'
      html += '<div class="dep">'
      html += '<ul>'
      menu.siblings.forEach(function (elem) {
        if (!elem.hasOwnProperty('substitute')) {
          html += '<li class="' + (elem.id === menu.id ? 'on' : '') + '"><a href="' + (elem.path ? elem.path : elem.link ? elem.link : '#') + '">' + elem.name + '</a></li>'
        }
      })
      html += '</ul>'
      html += '</div>'
      html += '</li>'
    }
    html += '</ul>'
    $('.breadcrumb').html(html)
  }).done(function () {
    $('.breadcrumb .li .dep ul').css('min-width', $('.breadcrumb .li.act .link').innerWidth())
    $('.breadcrumb .link').on('mouseover click', function () {
      if ($(this).closest('.li').hasClass('act')) {
        $(this).closest('.li').removeClass('act')
        $('.breadcrumb .li.home').removeAttr('title') 
        $(this).closest('.li').attr('title',' 접기')
      } else {
        $('.breadcrumb .li').removeClass('act')
        $('.breadcrumb .li').attr('title',' 접기')
        $('.breadcrumb .li.home').removeAttr('title')
        $(this).closest('.li').addClass('act')
        $(this).closest('.li').attr('title',' 펼치기')
        $(this).closest('.li').find('.dep ul').css('min-width', $(this).closest('.li').find('.link').innerWidth())
      }
      return false
    })
    $('.breadcrumb .dep, .breadcrumb').mouseleave(function () {
      $('.breadcrumb .li').removeClass('act')
      $('.breadcrumb .li').attr('title',' 접기')
      $('.breadcrumb .li.home').removeAttr('title')
    })
    $('.breadcrumb .link').focusin(function () {
      $('.breadcrumb .li').removeClass('act')
      $('.breadcrumb .li').attr('title',' 접기')
      $('.breadcrumb .li.home').removeAttr('title')
    })
    $('.breadcrumb .li > a').focusin(function () {
      $('.breadcrumb .li').removeClass('act')
    })
    $('.breadcrumb li:last-child .dep li:last-child a').keydown(function (e) {
      if (e.keyCode === 9) {
        $('.breadcrumb .li').removeClass('act')
        $('.breadcrumb .li').attr('title',' 접기')
        $('.breadcrumb .li.home').removeAttr('title')
      }
    })
  }).fail(function () {
    console.error('menu-' + lang + '.json is not exist.')
  })
})

 

수정된 부분

이전에는 타이틀을 스크립트로 넣었다가 빼는 코드로 짜봤는데

수정할 때는 스크립트에서 html을 넣어주는 코드에 처음부터 타이틀을 넣어두고 클래스를 보면서 스크립트를 작성