[Java] Implementation of category pull-down function

1 minute read

In the final task of a certain programming school, I implemented a category pull-down function (a function that displays a category by pulling it down when you touch the word “category” in the header of the top page), so I also explained it for my own output. I think  Screenshot 2020-06-10 10.55.11.png

Although it is prompt, the flow of implementing the pull-down function is as follows.

① Touch the category letters

④ After that, all you have to do is reassemble the acquired data into HTML and add it under the category characters.

⑤ The child element is also displayed in the same flow as above, so that it will not be displayed when it reaches the grandchild element.

The source code that achieves this is as follows. (Only relevant parts are extracted)

          = link_to "category", api_category_path(0) ,class: "category_name", id: "catroy_top_title"

  // Generate pulldown HTML
  function buildHTML(data){

    var html = $("<div>").addClass("header-bottom-left-category-field-nav")
    var link

      link = $("<a>", {
        href: "/api/categories/" + value.id,
      link = $("<p>").append(link)


    return html

  // Touch the category title and start over

   // start when the mouse leaves


    // start when the cursor is over
    'mouseenter': function() {

      // Get the category path
      var path = $(this).attr("href");

      // Get the child element of the touched category
        url: path,
        type: "GET",
        dataType: "json",
        cache: false,
        // do not display the choice if there are no child elements
        if( result.length != 0 ){
          // Add a new form below the selected form
          var html = buildHTML(result)

          // Delete any previously added list



      // start when the mouse leaves

    },'mouseleave': function(){

       // start when the mouse leaves
  }, ".category_name")


namespace :api do
  resources :categories, only: [:show]

class Api::CategoriesController <ApplicationController
  def show

    if params[:id] == "0"
      @categories = Category.where(ancestry:nil)
      @categories = Category.find(params[:id]).children

    respond_to do |format|
        if params[:id] == "0"
          redirect_to category_all_items_path
          redirect_to category_all_items_path(category_id: params[:id])
        render json: @categories



(*) Please use it after adjusting it to your environment.